H5 滾動穿透

問題背景:

網站須要在移動端完成適配,針對移動端H5以及web端採用的都是bluma這種flex佈局解決方案css

在H5中使用的列表採用的是 react-virtualized 來繪製表格html

爲了展現表格中單行數據的具體詳情,一般的解決方案是採用新頁面或者是彈窗來完成。react

這裏採用的是彈窗的方案,點擊單行數據後的數據詳情用的是 bluma 的 modal-card。web

具體細節和實例能夠參考: bulma.io/documentati…chrome

問題詳情:

在點擊單行數據後,彈窗顯示詳情數據,整個 modal-card 設置成 position:fixed;瀏覽器

沒有 footer 部分,設置 modal-card 的高度爲整個屏幕的高度:100vhbash

表現:佈局

  1. 在chrome瀏覽器中顯示,整個modal-card佔滿整個屏幕
  2. 在手機端顯示也是佔滿,可是問題是,根據手勢移動,會將瀏覽器的搜索框部分往上頂,此時彈窗下面的數據列表頁可以進行滑動,以後彈窗的標題覆蓋瀏覽器原搜索框部分,但這之間有延遲,能清晰看到下面頁面的數據
  3. 在其餘手機上會有另一種顯示,若是滑動速度比較快,彈窗出現後當即滑動,就會看到在彈窗的底部就會出現一個小的空白,一樣彈窗下面的頁面可以滾動,而且有明顯延遲和數據滾動顯示。

解決方案:

modal-card 自身解決方案:

JS + CSS overflow:hiddenpost

  1. 經過JS動態給彈窗下面的頁面html添加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');
}
複製代碼

  1. 經過 overflow:hidden 來禁止頁面的滾動
is-clipped {
    overflow:hidden!important
}
複製代碼
  1. 當彈窗關閉時,經過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();
}
複製代碼

相關文章
相關標籤/搜索