如何自己實現一個滾動條，自定義滾動條樣式

修改默認滾動條樣式

• 一般改變滾動條樣式可以改變滾動容器的幾個偽元素樣式即可

// 滾動條本體，要想設置滾動條樣式，需要先設置該元素
::-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 * (滾動盒子的寬度 / 滾動盒子內容的寬度)。

示例

• 默認狀態
  
• 鼠標懸浮狀態（注意下方滾動條）
  
• 滾動狀態
  

貼下代碼

<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>