移動端滾動穿透是指在移動端頁面中，當一個彈窗或遮罩層彈出後，在彈窗上滑動，底層頁面也跟著滾動的問題。這會影響使用者體驗，讓人感覺操作混亂。
造成滾動穿透的原因主要有以下幾種：
touchmove事件冒泡: 當在彈窗上進行觸控滑動操作時，touchmove事件會預設冒泡到底層頁面，觸發底層頁面的滾動。- 慣性滾動: 即使阻止了
touchmove的預設行為，由於慣性滾動，底層頁面仍然可能發生滾動。 - 某些特定 CSS 屬性: 例如
-webkit-overflow-scrolling: touch;雖然可以提升 iOS 上的滾動效能，但在某些情況下也會導致滾動穿透。
以下是一些常見的解決方案，並分析了它們的優缺點：
1. 阻止冒泡:
-
原理: 在彈窗的
touchmove事件處理函式中呼叫event.preventDefault()或event.stopPropagation()阻止事件的預設行為和冒泡。 -
程式碼示例:
const modal = document.getElementById('modal');
modal.addEventListener('touchmove', function(event) {
event.preventDefault(); // 阻止預設行為，推薦使用
// event.stopPropagation(); // 阻止冒泡，可能影響彈窗內部的滾動
});
- 優點: 簡單易用。
- 缺點: 如果彈窗本身需要滾動，這種方法會阻止彈窗內部的滾動。
2. 鎖定 body 的 overflow 屬性:
-
原理: 在彈窗彈出時，將
body的overflow屬性設定為hidden，阻止底層頁面的滾動。在彈窗關閉時，恢復body的overflow屬性。 -
程式碼示例:
const body = document.body;
const modal = document.getElementById('modal');
function openModal() {
body.style.overflow = 'hidden';
modal.style.display = 'block';
}
function closeModal() {
body.style.overflow = 'auto'; // 或初始值
modal.style.display = 'none';
}
- 優點: 相容性好，實現簡單。
- 缺點: 如果頁面原本就有捲軸，隱藏捲軸可能會導致頁面抖動或佈局錯亂。 此外，如果頁面結構複雜，例如有多個巢狀的滾動區域，這種方法可能失效。
3. 使用 position: fixed 定位彈窗:
-
原理: 使用
position: fixed定位彈窗，使其脫離文件流，不會影響底層頁面的滾動。 -
程式碼示例: 確保彈窗的 CSS 中包含
position: fixed; -
優點: 通常情況下可以有效防止滾動穿透。
-
缺點: 需要配合其他樣式進行調整，例如設定
top、left、width、height等屬性，確保彈窗的正確顯示位置和大小。
4. JavaScript 動態計算滾動位置:
-
原理: 在彈窗彈出時，記錄當前頁面的滾動位置。在
touchmove事件中，強制將頁面滾動位置設定為記錄的值，阻止頁面滾動。 -
程式碼示例: 較為複雜，需要根據具體場景進行調整。
-
優點: 可以精細控制滾動行為。
-
缺點: 實現較為複雜，可能會影響效能。
5. CSS 屬性 overscroll-behavior:
-
原理: 使用 CSS 屬性
overscroll-behavior: contain;可以阻止滾動鏈，從而防止滾動穿透。 -
程式碼示例:
.modal {
overscroll-behavior: contain;
}
- 優點: 簡單易用，相容性較好 (iOS Safari 15+ 和大部分現代瀏覽器)。
- 缺點: 對於一些老舊瀏覽器不相容。
最佳實踐建議:
- 優先考慮使用
position: fixed和overscroll-behavior: contain，它們通常能有效解決滾動穿透問題，並且實現簡單。 - 如果彈窗本身需要滾動，避免使用阻止冒泡的方法。
- 對於複雜的頁面結構，可能需要結合多種方法來解決滾動穿透問題。
- 測試不同機型和瀏覽器，確保相容性。
選擇哪種方案取決於專案的具體情況和需求。 建議根據實際情況進行測試和選擇最合適的解決方案。