vue實(shí)現一個(gè)滾動(dòng)條樣式

起初是想修改瀏覽器滾動(dòng)條樣式來(lái)達到效果
但是查閱了資料 瀏覽器滾動(dòng)條不能修改寬度與位置
沒(méi)辦法只能自己寫(xiě)
首先是滾動(dòng)條樣式

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

滾動(dòng)區域的樣式這里就不寫(xiě)了

1 首先是滾動(dòng)條滑塊的寬度

mounted() {
    //滾動(dòng)區域寬度  我這里是遍歷的user列表  所以我拿到列表的長(cháng)度*每個(gè)li的寬度即為總寬度
    let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //可視區域寬度  1065   這個(gè)就是上圖中白色背景盒子的寬度
    //滑塊寬度 500為滾動(dòng)條寬度  計算這個(gè)寬度是為了拿到滑塊可以滑動(dòng)的距離 這個(gè)下面會(huì )說(shuō)到
    this.activewidth = 500 * (1065 / bgWidth);
  },

2 給滑塊添加鼠標事件

move(e) {
      //獲取目標元素
      let odiv = e.target;
      // ScrollArea
      //算出鼠標相對元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      //滾動(dòng)條可以滾動(dòng)的距離
      let viewArea = 500 - this.activewidth;
      //滾動(dòng)區域寬度
      let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //鼠標按下并移動(dòng)的事件
        //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
        let left = e.clientX - disX;
        //left < 0 表示滑塊已經(jīng)到最左邊
        //或者left > viewArea  表示滑塊到最右邊
        if (left < 0 || left > viewArea) {
          //console.log("到頭了");
          //這個(gè)時(shí)候要清空事件 不然滑塊就劃出滾動(dòng)條區域了
          document.onmousemove = null;
        } else {
         //滑塊的滑動(dòng)距離
          odiv.style.left = left + "px";
          //滾動(dòng)區域的滑動(dòng)距離 = 滾動(dòng)區域寬度*(滑塊滑動(dòng)的距離/500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * left / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

到此這篇關(guān)于vue實(shí)現一個(gè)滾動(dòng)條樣式的文章就介紹到這了,更多相關(guān)vue實(shí)現滾動(dòng)條內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！