HTML5のスクロール貫通方法

Web サイトはモバイル H5 側と Web 側で適応させる必要があり、bluma などのフレックス レイアウト ソリューションが使用されます。

H5 で使用されるリストは、react-virtualized を使用してテーブルを描画します

テーブル内の 1 行のデータの特定の詳細を表示するには、通常の解決策は、新しいページまたはポップアップ ウィンドウを使用することです。

ここでは、ポップアップ ウィンドウ ソリューションが使用されており、単一行のデータをクリックした後のデータの詳細には、bluma のモーダル カードが使用されます。

具体的な詳細と例については、https://bulma.io/documentation/components/modal/ を参照してください。

データの 1 行をクリックすると、ポップアップ ウィンドウに詳細なデータが表示され、モーダル カード全体が Position:fixed; に設定されます。

フッター部分はありません。モーダルカードの高さを画面全体の高さに設定します: 100vh

パフォーマンス：

• Chrome ブラウザで表示すると、モーダル カード全体が画面全体を占めます。
• 携帯電話の表示もいっぱいですが、問題はジェスチャに合わせて移動するとブラウザの検索ボックス部分が押し上げられてしまい、ポップアップウィンドウの下にあるデータ一覧ページが表示されてしまうことです。をスライドすると、ポップアップ ウィンドウのタイトルが元のブラウザの検索ボックス部分を覆いますが、これには遅延があり、以下のページでデータがはっきりと確認できます。
• 他の携帯電話でも、スライド速度が比較的速く、ポップアップ ウィンドウが表示された直後にスライドすると、同様にポップアップ ウィンドウの下部に小さな空白が表示されます。ポップアップ ウィンドウの下はスクロールでき、明らかな遅延とデータのスクロール表示が発生します。

解決：

JS + CSS オーバーフロー:非表示

JS を介してポップアップ ウィンドウの下のページ HTML に CSS クラスを動的に追加します。

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}関数 openModal(ターゲット) { var $target = document.getElementById(target); rootEl.classList.add('is-cliped'); $target.classList.add('is-active');}

 is-cliped { オーバーフロー:非表示!重要}

ポップアップウィンドウが閉じたら、JS: is-clipped を介してページの CSS クラスを削除します。

 function closeModals() { rootEl.classList.remove('is-cliped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

ただし、この解決策をアプリケーションでテストした結果、問題は解決されず、上記の問題が依然として発生することが判明しました。

JS + CSS 位置:固定 + スクロールトップ

計画のアイデア:

1. ポップアップウィンドウが表示されたら、html の位置を固定に設定します。ポップアップウィンドウを閉じた後、html の postion 属性を解除します。
2. リスト ページはスクロールし、スクロールが発生した後にクリックされた行が発生する可能性があるため、HTML ページ自体のscrollTop 値を計算する必要があります。
3. ポップアップウィンドウ発生時の位置を固定に設定すると、HTMLページのscrollTop値が0になりページの先頭に戻ってしまうため、ポップアップウィンドウを閉じた後、手動で設定する必要があります。 HTML ページのscrollTop 値を使用して、HTML ページの元の位置にスクロールできるようにします。
4. 互換性を確保するには、さまざまなプロパティのscrollTop値を設定する必要があります。

ポップアップ ウィンドウの前:

 constscrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;global.document.documentElement.style.position = 'fixed';this.scrollTop =scrollTop;

ポップアップ ウィンドウを閉じます。

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = ''; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。