良いプログラマのWebフロントエンドの学習ルート共有スクロール浸透法

　　良いプログラマのWeb フロントエンド学習ルート共有スクロール浸透法は、この記事では、に焦点を当てて HTML5の方法ローリング浸透、非常に詳細に説明した紙のサンプルコードは、困っている友達を習得したり、作業するために私たちのすべてのための学習の一定の基準値を持っています私たちは、次はそれを学ぶと一緒に勉強します。

　　ウェブサイトの適応は、モバイル端末で行われる必要がある、モバイル端末H5 およびウェブ最後の用途があるbluma このフレックスレイアウトソリューション

　　では H5の用途で使用されるリスト反応する仮想化を、テーブルを描画します

　　テーブル内のデータの単一列の具体的な詳細を示すために、通常のソリューションを完了するために、新しいページを使用するか、ポップすることです。

　　ここでは、番組データは、単一の行がある前にデータをクリックでポップで bluma のモーダルカード。

　　単一の行をクリックした後、ポップは、詳細データを表示し、全体モーダル・カードは、配置位置：固定されました。

　　いいえフッタ部分ない、提供モーダル・カード全画面の高さの高さ： 100VH

　　パフォーマンス：

 

　　1 、クロムブラウザは、全体表示モーダルカードは画面全体を占有します

　　2 、移動端末に示すが充填されている、しかし、ジェスチャの動きに応じて、探索枠部はブラウザをトップであろうという問題は、次のリストページのデータは、タイトルポップブラウジングを被覆した後、スライドさせることができるポップあなたは、元の検索ボックスの一部であるが、データ間の遅延があり、明らかに以下のページを参照してくださいすることができます

　　3 、他の手に - 滑り速度が速い場合、マシンは別の番組を持つことになり、ポップ滑りすぐに、あなたは同じページ次のポップ、ポップの底に小さなギャップがあるでしょうが表示されますこれは、スクロール、および大幅な遅延とスクロールすることができます。

　　ソリューション：

 モーダルカード独自のソリューション：

JS + CSSのオーバーフロー：隠されました

動的に以下のクラスのJS、CSSを追加するためのHTMLページをポップします

 

もし（$ modalButtons.length> 0）{
    $ modalButtons.forEach（関数（$ EL）{
        $ el.addEventListener（ 'クリック'、機能（）{
        VARターゲット= $ el.dataset.target。
        openModal（ターゲット）
        }）;
    }）;
}

関数openModal（ターゲット）{
    変数$ターゲット=のdocument.getElementById（ターゲット）。
    rootEl.classList.add（ 'クリップされています'）;
    $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:fixed 方案

JS + CSS Position:fixed + scrollTop

方案思路：

1. 弹窗时，将html的position 设置为 fixed，将弹窗关闭后，将html的postion 属性取消。

2. 因为列表页会出现滚动的情况，而点击的行有可能是在滚动发生后，所以需要计算html页面本身的scrollTop 值。

3. 因为弹窗时设置position为fixed后，html页面的 scrollTop 值会变成0，会回到页面顶部，所以在关闭弹窗后，需要手动设置html页面的scrollTop 值，让其滚动到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();
}