好程式設計師web前端學習路線分享滾動穿透方法

　　 好程式設計師web 前端學習路線分享 滾動穿透方法 ， 這篇文章主要介紹Html5 滾動穿透的方法，文中透過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著一起學習學習吧。

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

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

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

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

　　 在點選單行資料後，彈窗顯示詳情資料，整個modal-card 設定成 position:fixed;

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

　　 表現：

 

　　1 、 在chrome 瀏覽器中顯示，整個 modal-card 佔滿整個螢幕

　　2 、 在手機端顯示也是佔滿，但是問題是，根據手勢移動，會將瀏覽器的搜尋框部分往上頂，此時彈窗下面的資料列表頁能夠進行滑動，之後彈窗的標題覆蓋瀏覽器原搜尋框部分，但這之間有延遲，能清晰看到下面頁面的資料

　　3 、 在其他手 - 機上會有另外一種顯示，如果滑動速度比較快，彈窗出現後立即滑動，就會看到在彈窗的底部就會出現一個小的空白，同樣彈窗下面的頁面能夠滾動，並且有明顯延遲和資料滾動顯示。

　　 解決方案：

  modal-card 自身解決方案：

JS + CSS overflow:hidden

透過JS動態給彈窗下面的頁面html新增css類

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 來禁止頁面的滾動

1 2 3

is-clipped {     overflow:hidden!important }

當彈窗關閉時，透過JS刪除掉頁面的 css 類：is-clipped

1 2 3 4 5 6

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 值

彈窗之前：

1 2 3

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

 

關閉彈窗：

1 2 3 4 5 6 7 8

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