カスタムスクロールバー効果を実現するJavaScript

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右のスクロール バーが表示されない場合があります。しかし、同じビューポートに 2 つのスクロール バーを表示する必要があります。

解決策の 1 つは、スクロール バーをカスタマイズして、元のスクロール バーを非表示にすることです。

カスタムスクロールバー

スクロールバー.js

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'prop-types' から PropTypes をインポートします。
'../css/scrollbar.css' をインポートします。

定数propTypes = {
  イベントバス: PropTypes.object.isRequired、
};

クラスScrollBarはComponentを拡張します{

  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      ドラッグ中: false、
      // X: 下部スクロールバーの左オフセット、範囲 [0, innerWidth - 100]。ドラッグすると、x は変化します
      x: ヌル、
      // clickX は、スクロール バーをドラッグするときのスクロール バーの左側からマウスのクリック位置までの距離を示します。範囲は [0, 100] です。ドラッグすると、clickX は変化しません。
      クリックX: 0,
    };
  }

  コンポーネントマウント() {
    this.unsubscribeScrollToColumn = this.props.eventBus.subscribe('set-scrollbar-left', this.setScrollBarLeft);
    document.addEventListener('mouseup', this.onMouseUp);
  }

  コンポーネントのマウントを解除します(){
    this.unsubscribeScrollToColumn();
    document.removeEventListener('mouseup', this.onMouseUp);
  }

  /**
   * この関数はリンクを処理します (インターフェイスがスクロールすると、スクロールバーがスクロールします)。ここで 100 はスクロールバーの幅です */
  setScrollBarLeft = (左比率) => {
    // 下のスクロールバーがドラッグされている場合、スクロールバーを左に設定できません
    if (this.state.isDraging) が return;
    this.setState({
      x: (window.innerWidth - 100) * 左比率、
    });
  }

  /**
   * マウスが押されるとドラッグを開始し、現在の位置を最初のドラッグ位置に設定します*/
  ハンドルマウスダウン = (e) => {
    this.setState({
      ドラッグ中: true、
      クリックX: e.nativeEvent.offsetX、
    });
  }

  /**
   * マウスを離したらドラッグを止めて現在のクリック位置を 0 に設定します (これは必要ですか?)
   */
  マウスを離すと () => {
    if (this.state.isDraging) {
      タイムアウトを設定する(() => {
        this.setState({ isDraging: false, clickX: 0 });
      }, 100);
    }
  }

  /**
   * ドラッグ時(マウスが押されて動き始める)に、現在の変位を取得し、新しいオフセットを計算します * 注: 右にスクロールすることも、左にスクロールすることもできます * ドラッグ時には、現在の比率を計算し、グリッドを水平方向にスクロールする必要があります * 現在の問題は、ドラッグ中にマウスがスクロールバーの外側に移動すると、ドラッグをトリガーできないことです * */ 
  onMouseMove = (e) => {
    e.persist();
    if (this.state.isDraging) {
      // 新しい距離 = 元の距離 + (現在のスクロール距離 - 初期スクロール距離)
      newX = this.state.x + e.nativeEvent.offsetX - this.state.clickX とします。
      newX = Math.min(newX, window.innerWidth - 100); // 最大ドラッグは右の境界を超えることはできません this.setState({ x: newX });
      定数 leftRatio = newX / (window.innerWidth - 100);
    }
  }

  レンダリングボトムツールバー = () => {
    戻る (
      <div
        className="antiscroll-scrollbar antiscroll-scrollbar-horizo​​ntal antiscroll-scrollbar-shown"
        スタイル={{transform: `translateX(${this.state.x}px)`}}
        ドラッグ可能="true"
        onMouseDown={this.handleMouseDown}
        onMouseMove = {this.onMouseMove}
        onMouseUp={this.onMouseUp}
      </div>
    );
  }

  // todo: rightToolbar イベント ハンドル
  レンダリング右ツールバー = () => {
    戻る (
      <div
        className="アンチスクロールバー アンチスクロールバー垂直 アンチスクロールバー表示"
      </div>
    );
  }

  与える() {
    戻る (
      <div id="scrollOverlay" className="antiscroll-wrap">
        {this.renderBottomToolbar()}
        {this.renderRightToolbar()}
      </div>
    );
  }
}

スクロールバー.propTypes = propTypes;

デフォルトのScrollBarをエクスポートします。

スクロールバーのスタイル

対応する scrollbar.css

#スクロールオーバーレイ{
  表示: インラインブロック;
  オーバーフロー: 非表示;
  位置: 固定;
  左: 0;
  右: 0;
  上: 156px;
  下部: 0;
  zインデックス: 4;
  ポインタイベント: なし;
  不透明度: .7;
}

#スクロールオーバーレイ .antiscroll-scrollbar {
  ポインタイベント: 自動;
  zインデックス: 2;
  背景色: hsla(0,0%,0%,0.28);
  ボックスシャドウ: インセット 0 0 0 1px hsl(0,0%,100%);
  境界線の半径: 5px;
}

#スクロールオーバーレイ .antiscroll-スクロールバー-水平 {
  高さ: 12px;
  幅: 100ピクセル;
  位置: 絶対;
  下: 32px;
}

#スクロールオーバーレイ .antiscroll-スクロールバー-垂直 {
  幅: 12px;
  高さ: 100px;
  位置: 絶対;
  右: 0;
}

/* 元のスクロールオブジェクトのスクロールバーを非表示にする */
.react-demo::-webkit-スクロールバー{
  幅: 0;
}

スクロールバー特有の使用法

特定の用途のために、このスクロールバーをグリッドに追加します

'../components/scrollbar' から ScrollBar をインポートします。

// グリッドネイティブスクロール、コールバック関数をトリガー onScroll = () => {
  // todo: clientWidth が innerWidth より小さい場合は、下部のスクロールバーを表示しない
  scrollLeftRatio を this._scrollLeft / (clientWidth - window.innerWidth) とします。
  // ネイティブ DOM が左または右にスクロールすると、現在のスクロール比率 (オフセット/合計幅) を取得し、スクロールするスクロール バーを設定します。this.setScrollLeftRatio(scrollLeftRatio);
}

setScrollLeftRatio = (スクロール左比率) => {
  this.props.eventBus.dispatch('set-scrollbar-left', scrollLeftRatio);
}

// 元のスクロール要素では、イベント値の処理を容易にするために eventBus を渡します // <ScrollBar eventBus={this.props.eventBus}/>

カスタム スクロール バー用のオープン ソースのサードパーティ コンポーネントも多数あります。これらを実装するには、サードパーティ ライブラリを使用することをお勧めします (スクロール バーの計算には多くの考慮事項があります)。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript を使用したスクロールバー イベントの詳細な説明
  • カスタムスクロールバー効果を実現するネイティブJS
  • JS カスタムスクロールバー効果の簡単な実装コード
  • JavaScript による範囲限定ドラッグとカスタム スクロール バー アプリケーション (3)
  • js スクロールバーのスムーズな動きの例コード
  • jQuery iScroll.js モバイルスクロールバープラグインの使い方を学ぶ
  • js/jqueryはブラウザウィンドウの表示領域の高さと幅、スクロールバーの高さを取得する実装コードです。
  • スクロールバーの下部を決定するJSコード
  • スクロールバーがページの一番下までスクロールしたと判断してイベントを実行する方法をJSで実装する
  • js 操作スクロールバーイベントの例

<<:  Linux環境変数ファイルの簡単な紹介

>>:  MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

推薦する

MySQL でインデックスとして B+Tree を使用する利点は何ですか?

目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...

MySQL 基本チュートリアル パート 1 MySQL5.7.18 のインストールと接続チュートリアル

この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...

HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...

挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...

mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)

目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...

Linux suse11でルートパスワードを忘れた場合に変更する方法の簡単な分析

SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...

CSS の読み込みによってブロックが発生しますか?

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

HTML マルチヘッダーテーブルコード

1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...

Linux システムにおける時間設定の概要

1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...

MySQLインデックスを最適化する方法

1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...