Vue常见面试题，如何修改滚动条样式（谷歌浏览器）

1.template模块

<div style="max-height: 300px;overflow-y: auto;width: 300px">
   <div style="height: 400px;font-size: 16px;background-color: white">
      <span>滚动条样式修改</span>
   </div>
</div>
1
2
3
4
5

2.style模块

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  /*滚动槽颜色*/
  background-color: red;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  /*滚动条颜色*/
  background-color: blue;
  --webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

---

总结

每天一个提升小技巧！！！