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

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

首先是滚动条样式

<div class="scrollBar" v-if="roleList.length > 5">
        <div
          class="box"
          @mousedown="move"
          v-bind:style="{ width: activewidth + "px" }"
        ></div>
      </div>

样式

.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怎么实现一个滚动条样式”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。