如何自己实现一个滚动条，自定义滚动条样式

Posted 2021-05-15 luckiest

修改默认滚动条样式

• 一般改变滚动条样式可以改变滚动容器的几个伪元素样式即可

// 滚动条本体，要想设置滚动条样式，需要先设置该元素
::-webkit-scrollbar {
   height: 6px;
   width: 6px;
}
// 滚动条轨道
::-webkit-scrollbar-track {
   background-color: #ccc;
}
// 滚动条滑块
::-webkit-scrollbar-thumb {
   background-color: rgba(#ff0000, .6);
}

效果图如下

还有一些其他元素的修改，附上链接 http://www.360doc.com/content/15/0209/17/7250786_447494813.shtml

不使用默认滚动条，自定义实现一个滚动条

为什么要自己实现一个滚动条呢，主要原因是在项目中有一个需求，h5页面中的滚动条，去更改滚动条伪元素样式，在安卓上是没有问题的，因为我是在微信中打开的，想着都是使用微信浏览器，内核相同，效果应该没啥差别，但是结果是在ios上没有效果，ios上展示的还是内置滚动条原始的样式，所以打算自己去实现这个滚动条。

1. 自定义实现一个滚动条，需要把默认的滚动条隐藏、

   • 只要设置了超出滚动，默认滚动条就会出现，所以可以使滚动容器外面再包裹一个小一点的盒子，设置overflow: hidden，把滚动条隐藏掉。

2. 创建出自定义的滚动条

   • 定位一个滚动条在容器的右边或者下面定位一个滚动条本体，设置轨道和滚动滑块。滑块的宽度需要计算一下，以横向滚动为例，即滚动盒子的宽度 * (滚动盒子的宽度 / 滚动盒子内容的宽度)，这个比例也是下面计算滑块滑动距离需要用到的。

3. 让滚动条随着内容的滚动而滚动

   • 这里滚动条滑块的位置是通过定位实现的。监听滚动盒子的滚动事件，每次滚动获取其滚动距离（scrollLeft），相应的计算滚动滑块的位置 left值为 scrollLeft * (滚动盒子的宽度 / 滚动盒子内容的宽度)。

示例

• 默认状态
  
• 鼠标悬浮状态（注意下方滚动条）
  
• 滚动状态
  

贴下源码，vue文件

<template>
  <div class="content">
    <div class="big-box">
      <div ref="boxRef" class="box" @scroll="boxScrollFun">
        <ul ref="ulRef" :style="ulStyle">
          <li
            v-for="item in liList"
            :key="item"
          >{{ item }}</li>
        </ul>
      </div>
      <div class="scroll">
        <div ref="scrollBodyRef" class="scroll-body" :style="scrollBodyStyle" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: \'Teast05\',
  data() {
    const liList = []
    for (var i = 1; i <= 30; i++) {
      liList.push(i)
    }
    return {
      liList,
      scrollBodyWidth: 100,
      boxScrollLeft: \'\',
      boxWidth: \'\',
      ulWidth: \'\'
    }
  },
  computed: {
    scrollBodyStyle() {
      return {
        width: this.scrollBodyWidth + \'px\',
        left: this.boxScrollLeft * this.boxWidth / this.ulWidth + \'px\'
      }
    },
    ulStyle() {
      return {
        width: 220 * this.liList.length + \'px\'
      }
    }
  },
  mounted() {
    this.boxWidth = this.$refs.boxRef.clientWidth
    this.ulWidth = this.$refs.ulRef.clientWidth
    this.scrollBodyWidth = this.boxWidth * this.boxWidth / this.ulWidth
  },
  methods: {
    boxScrollFun() {
      this.boxScrollLeft = this.$refs.boxRef.scrollLeft
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  height: 200px;
  margin: 100px auto;
  border: 1px solid #ccc;
  .big-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .box {
      width: 100%;
      height: calc(100% + 18px);
      overflow: auto;
      ul {
        height: 100%;
        display: flex;
        margin: 0;
        padding: 10px 0;
        li {
          list-style: none;
          padding: 0;
          margin: 0 10px;
          width: 200px;
          height: 100%;
          flex-wrap: nowrap;
          flex-shrink: 0;
          background-color: pink;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 50px;
          font-weight: bold;
          color: rgba(#333, .6);
        }
      }
    }
    .scroll {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      opacity: 0;
      transition: opacity .3s;
      .scroll-body {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(#000, .1);
        width: 100px;
        height: 100%;
        border-radius: 3px;
      }
    }
    &:hover {
      .scroll {
        opacity: 1;
      }
    }
  }
}
</style>