怎样用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框架有帮助，想要了解更多vue实现滚动条的样式，请搜索群英网络以前的文章或继续浏览其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery中判断点击哪个li的方法是什么？

  这篇文章给大家分享一个jQuery相关示例，需求是判断点击了哪个li，这里使用到的方法index()方法，文中示例代码有一定的参考价值，感兴趣的朋友可以了解看看，下面我们一起来学习一下jQuery中判断点击哪个li的方法。

• JS数组中entries()方法可以做什么，用法是怎样的

  这篇文章主要介绍了js数组的 entries() 获取迭代方法，entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。下面来详细介绍该neural,需要的朋友可以参考一下

• js中模块化是什么意思？有何用处？

  js中模块化是什么意思？有什么用？很多新手对js中模块化可能不是很了解，对此，下面小编就给大家介绍一下模块化的概念和作用，以及怎样实现模块化，有需要的朋友可以参考，接下来我们一起往下看吧。

• JS中遍历子元素的方法是什么，使用有什么要注意的

  这篇文章主要介绍了一文了解JavaScript用Element Traversal新属性遍历子元素，文章围绕Element Traversal新属性的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助

• vue如何自行实现派发与广播？一文带你搞懂

  这篇文章主要给介绍vue派发与广播，很多新手对于vue派发与广播可能还是不是很了解，因此这篇文章就给大家分享vue自行实现派发与广播，感兴趣的朋友可以看一看，希望大家阅读完这篇文章之后大有收获。