Html5 スクロールする方法

イシューコンテキスト

サイトをモバイルに対応させる必要があり、モバイルH5とWebの両方で使用されているフレックスレイアウトソリューションはbluma

H5で使用されているリストは、テーブルを描画するためにreact-virtualizedが使用されている

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

ここではポップアップのソリューションを使用し、1行のデータをクリックした後のデータの詳細は、blumaのmodal-cardを使用して行われます。

詳細とサンプルは、以下のサイトでご覧いただけます。 https://bulma.io/documentation/components/modal/

質問の詳細

1行のデータをクリックすると、モーダルカード全体をposition:fixedに設定して、ポップアップで詳細データを表示します。

フッター部分を使用せず、モーダルカードの高さを画面全体の高さに設定します。100vh

表現しています。

• クロームブラウザで表示すると、モーダルカード全体が画面一杯に表示される
• モバイルでの表示も完全ですが、問題は、ジェスチャーの動きによると、ブラウザの検索ボックス部分をアップされ、この時点でデータリストページの下のポップアップウィンドウは、ブラウザ元の検索ボックス部分をカバーするポップアップウィンドウのタイトルの後、スライドすることができるようになりますが、この間に遅延がある、明確に次のページのデータを見ることができます。
• 他の携帯電話では、ポップアップが表示された直後に速くスライドさせると、ポップアップの下部に小さな空白が表示され、再びポップアップの下のページをスクロールすることができ、明確な遅延とデータのスクロールの表示があります別の表示があるでしょう。

解決方法

modal-card 自己解決。

JS + CSS overflow:hidden

ポップアップの下のページのhtmlにJSで動的にcssクラスを追加する

if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
        $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        openModal(target);
        });
    });
}

function openModal(target) {
    var $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $target.classList.add('is-active');
}

overflow:hiddenでページスクロールを無効化する。

is-clipped {
    overflow:hidden!important
}

ポップアップが閉じられたとき、JSを介してページのcssクラスを削除する: is-clipped

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

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

position:固定スキーム

JS + CSS 位置：固定 + scrollTop

解決策のアイデア

1. ポップアップウィンドウを閉じるときにhtmlのpositionをfixedにし、ポップアップウィンドウを閉じるときにhtmlのposition属性をunsetにする。
2. リストページはスクロールしているように見え、クリックされた行はスクロールが発生した後である可能性が高いため、htmlページ自体のscrollTop値を計算する必要があります。
3. htmlページのscrollTop値は、positionをfixedにした後、ポップアップウィンドウを閉じると0になり、ページの先頭に戻ってしまうため、ポップアップウィンドウを閉じた後にhtmlページの元の位置までスクロールするように手動で設定する必要があります。
4. 互換性を保つため、scrollTop の値は異なる属性で設定する必要があります。

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

const scrollTop = 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 = '';
    global.pageYOffset = this.scrollTop;
    global.document.documentElement.scrollTop = this.scrollTop;
    global.document.body.scrollTop = this.scrollTop;
    closeOrderHistoryModal();
}

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。