最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみると、ブラウザのスクロールバーでは幅と位置を変更できないことがわかりました。自分で書くしかありませんでした。まず、スクロールバーのスタイル <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7 Zabbix3.4 メールアラーム設定(メール内容がxx.bin添付ファイルになる問題の解決)
>>: システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...
背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...
目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...
昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...
指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...
Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....
dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...