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 가 스크롤 바 스타일 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 가 스크롤 바 내용 을 실현 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!