Html5 滾動穿透的方法

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

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

為了展示表格中單行資料的具體詳情，通常的解決方案是採用新頁面或是彈跳視窗來完成。

這裡採用的是彈跳窗的方案，點選單行資料後的資料詳情用的是bluma 的modal-card。

具體細節和實例可以參考：https://bulma.io/documentation/components/modal/

點擊單行數據後，彈跳窗顯示詳情數據，整個modal-card 設定成position:fixed;

沒有footer 部分，設定modal-card 的高度為整個畫面的高度：100vh

表現：

• 在chrome瀏覽器中顯示，整個modal-card佔滿整個螢幕
• 在手機端顯示也是佔滿，但是問題是，根據手勢移動，會將瀏覽器的搜尋框部分往上頂，此時彈窗下面的數據列表頁能夠進行滑動，之後彈窗的標題覆蓋瀏覽器原搜尋框部分，但這之間有延遲，能清楚看到下面頁面的數據
• 在其他手機上會有另一種顯示，如果滑動速度比較快，彈窗出現後立即滑動，就會看到在彈窗的底部就會出現一個小的空白，同樣彈窗下面的頁面能夠滾動，並且有明顯延遲和數據滾動顯示。

解決方案：

JS + CSS overflow:hidden

透過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');}

 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'); });}

但是這種方案在應用程式中測試過後，發現並不能解決問題，上面的問題還是出現

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 = scrolldocop;

關閉彈跳窗：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。