Vue implements a scroll bar style

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

mounted() {
    //Scrolling area width I am traversing the user list here, so I get the length of the list * the width of each li is the total width let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //Visible area width 1065 This is the width of the white background box in the above picture //Slider width 500 is the scroll bar width This width is calculated to get the distance the slider can slide. This will be discussed below this.activewidth = 500 * (1065 / bgWidth);
  },

move(e) {
      //Get the target element let odiv = e.target;
      //ScrollArea
      //Calculate the position of the mouse relative to the element let disX = e.clientX - odiv.offsetLeft;
      //The distance the scroll bar can scroll let viewArea = 500 - this.activewidth;
      //Scrolling area width let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //Mouse pressed and moved event //Subtract the position of the mouse relative to the element from the position of the mouse to get the position of the element let left = e.clientX - disX;
        //left < 0 means the slider has reached the far left //or left > viewArea means the slider has reached the far rightif (left < 0 || left > viewArea) {
          //console.log("It's over");
          // At this time, you need to clear the event or the slider will go out of the scroll bar area document.onmousemove = null;
        } else {
         //The sliding distance of the slider odiv.style.left = left + "px";
          //Sliding distance of scrolling area = scrolling area width * (sliding distance of slider / 500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * left / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },