実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは 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)の原理と使い方の詳細な説明
目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...
この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...
HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...
目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...
目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...
SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...
目次序文1. 環境設定1.1 achartsをインストールする1.2 グローバル参照2. ドーナツチ...
おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...
<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...
Web ページでは、基本的に <input type="file">...
1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...
1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...
1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...
ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...
Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...