如何用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实现滚动条样式”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。