移动端滚动穿透是什么原因？有哪些解决方案？

移动端滚动穿透是指在移动端页面中，当一个弹窗或遮罩层弹出后，在弹窗上滑动，底层页面也跟着滚动的问题。这会影响用户体验，让人感觉操作混乱。

造成滚动穿透的原因主要有以下几种：

• 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，它们通常能有效解决滚动穿透问题，并且实现简单。
• 如果弹窗本身需要滚动，避免使用阻止冒泡的方法。
• 对于复杂的页面结构，可能需要结合多种方法来解决滚动穿透问题。
• 测试不同机型和浏览器，确保兼容性。

选择哪种方案取决于项目的具体情况和需求。 建议根据实际情况进行测试和选择最合适的解决方案。