如何用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實現滾動條樣式”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。