自定义滚动条组件（VUE）

半自动学习机丶

已于 2024-02-04 10:34:21 修改

阅读量1.5k

点赞数 11

CC 4.0 BY-SA版权

文章标签：前端 vue javascript

于 2024-01-20 09:16:35 首次发布

本文链接：https://blog.youkuaiyun.com/Angel_of_hell/article/details/135703133

自定义滚动条组件（VUE）

前言

实际开发的业务有这样的场景：需要对浏览器滚动条进行定制化的更改，比如滚动条的颜色、样式等。
谷歌浏览器中提供::-webkit-scrollbar属性可对滚动条样式进行简单的更改。如果需要进行更复杂的，例如滚动条宽度等的更改，就需要模拟浏览器的滚动条自己封装定制组件。

废话不多说直接上代码

HTML部分

<!-- showScroll 控制滚动条显示与否 -->
 <div class="scrollBox-work" v-if="showScroll">
	<!-- scrollBox-track-work 定义轨道 -->
   <div class="scrollBox-track-work">
	 <!-- scrollBox-thumb-work 定义滑轮 -->
     <div class="scrollBox-thumb-work"></div>
   </div>
 </div>

js部分

export default {
   
   
  name: "ScrollBar",
  props: {
   
   
    targetEle: {
   
   
      type: HTMLDivElement,
    },
  },
  data() {
   
   
    return {
   
   
      // 注销事件对象
      removeEvent: null,
      showScroll: false,
      // ref方式调用时保存的滚动元素dom
      refTargetEle: null
    };
  },
  mounted() {
   
   
    // 页面尺寸改变时，需要重新获取滚动
    window.addEventListener("resize", this.resizeFun);
  },
  beforeDestroy() {
   
   
    // 组件注销时，移除监听事件
    this.removeEvent ? this.removeEvent() : null;
    window.removeEventListener("resize", this.resizeFun);
  },
  methods: {
   
   
    // 主逻辑部分
    addScrollEvent(targetEle = this.targetEle) {
   
   
      if (!this.targetEle) this.refTargetEle = targetEle 
      if (targetEle) {
   
   
        const targetEleWidth = targetEle.