溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
好程序員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(); } |
?
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
