カスタムスクロールバー効果を実現する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)の原理と使い方の詳細な説明

推薦する

CSS @font-face パフォーマンス最適化の詳細な理解

この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...

HTML でのメタタグと使用法の詳細な説明

これ以上無駄話をして時間を無駄にしないので、今日の話題を始めましょう。 HTML のメタタグ1. メ...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

VMware での Ubuntu と Windows 間のファイル共有

この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...

ウェブサイトのユーザーエクスペリエンスデザイン(UE)

Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...

マージンのマージの問題を解決する

1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...

画像ボタン送信とフォーム繰り返し送信の問題に関する議論

多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わ...

VMware 仮想マシンの 3 つのネットワーク方式と原則 (概要)

1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...

HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法

実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って...