Vueはスクロールバースタイルを実装します

<div class="scrollBar" v-if="roleList.length > 5">
        <div
          クラス="ボックス"
          @mousedown="移動"
          v-bind:style="{ 幅: アクティブ幅 + 'px' }"
        </div>
      </div>

.スクロールバー{
  幅: 500ピクセル;
  高さ: 6px;
  背景: #d5dbf5;
  マージン: 0 自動;
  上マージン: 72px;
  境界線の半径: 4px;
  位置: 相対的;

  。箱 {
    幅: 30ピクセル;
    高さ: 100%;
    背景: #fff;
    境界線の半径: 4px;
    位置: 絶対;
    左: 0;
  }
  .box:hover {
    カーソル: ポインタ;
  }
}

マウント() {
    //スクロール領域の幅 ここではユーザー リストをトラバースしているので、リストの長さを取得します * 各 li の幅が合計幅です let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    // 表示領域の幅 1065 これは、上の画像の白い背景ボックスの幅です // スライダーの幅 500 は、スクロール バーの幅です この幅は、スライダーがスライドできる距離を取得するために計算されます。これについては、後で説明します this.activewidth = 500 * (1065 / bgWidth);
  },

移動する{
      // ターゲット要素を取得します。let odiv = e.target;
      //スクロール領域
      //要素に対するマウスの位置を計算します。let disX = e.clientX - odiv.offsetLeft;
      // スクロールバーがスクロールできる距離 let viewArea = 500 - this.activewidth;
      //スクロール領域の幅 let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      ドキュメント.onmousemove = (e) => {
        // マウスが押されて移動されたイベント // 要素に対するマウスの位置をマウスの位置から減算して、要素の位置を取得します。let left = e.clientX - disX;
        //left < 0 はスライダーが左端に到達したことを意味します //または left > viewArea はスライダーが右端に到達したことを意味しますif (left < 0 || left > viewArea) {
          //console.log("終了しました");
          // このとき、イベントをクリアする必要があります。そうしないと、スライダーがスクロール バー領域から外れてしまいます。 document.onmousemove = null;
        } それ以外 {
         //スライダーのスライド距離 odiv.style.left = left + "px";
          //スクロール領域のスライド距離 = スクロール領域の幅 * (スライダーのスライド距離 / 500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * 左 / 500 + "px";
        }
      };
      ドキュメント.onmouseup = (e) => {
        ドキュメント.onmousemove = null;
        ドキュメント.onmouseup = null;
      };
    },