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

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 {
    カーソル: ポインタ;
  }
}

スクロールエリアのスタイルはここには書かれていません

1 まずスクロールバースライダーの幅です

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

2 スライダーにマウスイベントを追加する

移動する{
      // ターゲット要素を取得します。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;
      };
    },

これで、Vue でスクロール バー スタイルを実装する方法に関するこの記事は終了です。Vue でスクロール バーを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueは2つのエリアスクロールバーの同期スクロールを実装します
  • Vue.js デスクトップ カスタム スクロール バー コンポーネント 美化 スクロール バー VScroll
  • Vueはスクロールバーを記憶し、ドロップダウンの読み込みを実装するのに最適な方法です
  • Vueでスクロールバーのスタイルを変更する方法
  • Vue はデータのレンダリング後にスクロールバーの位置制御を実装します (推奨)
  • Vue スクロールバープラグインの実装コード
  • Vueフレームワークでカスタムスクロールバー(easyscroll)を実装する方法
  • Vue でスクロールバーのスタイルを変更する方法

<<:  Centos7 Zabbix3.4 メールアラーム設定(メール内容がxx.bin添付ファイルになる問題の解決)

>>:  システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません

推薦する

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

将来的に人気のあるウェブサイトのナビゲーションの方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

Docker コンテナにおける Patroni の簡単な分析

目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...

MySQL レプリケーション メカニズムの原理の説明

背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

Linux システムでの vim プラグインのインストールの概要

目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...

CentOS7でパーティションのサイズを変更する方法

昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Vueベースのビデオプレーヤーの実装例

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...

Dockerはローカルイメージとコンテナの保存場所を設定します

指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Dockerコマンドは一般ユーザーが実行できるように実装されている

dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...