vue修改滚动条样式的方法

这篇文章主要介绍了vue修改滚动条样式,首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧

目录

首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。

注意， ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。

其次还需要了解滚动条的一些组成：

• ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
• ::-webkit-scrollbar-thumb 滚动条里面的滑块
• ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击以微调滑块的位置
• ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
• ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
• ::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)

对此有了一些了解之后就可以上手滚动条样式的修改了。

代码实现：

<ul class="nav-tabs-scroll">
  <li v-for="(item,index) in tabs" :key="index" class="nav-item-scroll">{
<!-- -->{item.text}}<