実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは 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-horizontal 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明
この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...
これ以上無駄話をして時間を無駄にしないので、今日の話題を始めましょう。 HTML のメタタグ1. メ...
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...
最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...
この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...
Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...
1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...
1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...
この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...
この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...
多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わ...
1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...
実際のWeb開発では、画像の挿入やCSSファイルなどすべてパスが必要となります。ファイルパスを誤って...