vue怎么实现一个滚动条样式

这篇文章主要介绍了vue怎么实现一个滚动条样式的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么实现一个滚动条样式文章都会有所收获，下面我们一起来看看吧。

首先是滚动条样式

样式

.scrollBar {  width: 500px;  height: 6px;  background: #d5dbf5;  margin: 0 auto;  margin-top: 72px;  border-radius: 4px;  position: relative;  .box {    width: 30px;    height: 100%;    background: #fff;    border-radius: 4px;    position: absolute;    left: 0;  }  .box:hover {    cursor: pointer;  }}

滚动区域的样式这里就不写了

1 首先是滚动条滑块的宽度

mounted() {    //滚动区域宽度  我这里是遍历的user列表  所以我拿到列表的长度*每个li的宽度即为总宽度    let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;    //可视区域宽度  1065   这个就是上图中白色背景盒子的宽度    //滑块宽度 500为滚动条宽度  计算这个宽度是为了拿到滑块可以滑动的距离 这个下面会说到    this.activewidth = 500 * (1065 / bgWidth);  },

2 给滑块添加鼠标事件

move(e) {      //获取目标元素      let odiv = e.target;      // ScrollArea      //算出鼠标相对元素的位置      let disX = e.clientX - odiv.offsetLeft;      //滚动条可以滚动的距离      let viewArea = 500 - this.activewidth;      //滚动区域宽度      let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;      _document.onmousemove = (e) => {        //鼠标按下并移动的事件        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置        let left = e.clientX - disX;        //left < 0 表示滑块已经到最左边        //或者left > viewArea  表示滑块到最右边        if (left < 0 || left > viewArea) {          //console.log("到头了");          //这个时候要清空事件 不然滑块就划出滚动条区域了          _document.onmousemove = null;        } else {         //滑块的滑动距离          odiv.style.left = left + "px";          //滚动区域的滑动距离 = 滚动区域宽度*(滑块滑动的距离/500)          this.$refs.ScrollArea.style.left =            "-" + bgWidth * left / 500 + "px";        }      };      _document.onmouseup = (e) => {        _document.onmousemove = null;        _document.onmouseup = null;      };    },

关于"vue怎么实现一个滚动条样式"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue怎么实现一个滚动条样式"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。