防止子元素不可滚动时父元素滚动的方法
在前端开发中，我们经常会遇到这样的场景：页面中有一个可滚动的父容器，内部嵌套了一个同样需要滚动的子元素。当子元素滚动到边界时，继续滚动往往会触发父元素的滚动，这种现象被称为“滚动穿透”。本文将介绍几种常见的解决方案，帮助开发者避免这类问题。
问题场景说明
假设我们有如下页面结构：外层是一个全屏的可滚动容器，内部有一个固定高度的可滚动列表。当列表滚动到顶部或底部时，继续滑动屏幕会导致外层容器跟随滚动，影响用户体验。
<div class="parent"> <div class="child"> <p>列表项1</p> <p>列表项2</p> <p>列表项3</p> <p>列表项4</p> <p>列表项5</p> <p>列表项6</p> <p>列表项7</p> <p>列表项8</p> </div> </div>
对应的基础样式如下：
.parent {
height: 100vh;
overflow-y: auto;
background: #f5f5f5;
padding: 20px;
}
.child {
height: 200px;
overflow-y: auto;
background: #fff;
border: 1px solid #ddd;
}
.child p {
height: 40px;
line-height: 40px;
padding-left: 16px;
border-bottom: 1px solid #eee;
}解决方案一：监听滚动事件判断边界
核心思路是监听子元素的滚动事件，当子元素滚动到顶部时，阻止继续向上滚动；当滚动到底部时，阻止继续向下滚动。我们可以通过判断子元素的scrollTop、scrollHeight和clientHeight属性来确定是否到达边界。
实现步骤如下：
给子元素绑定
touchmove事件（移动端）和wheel事件（PC端）在事件处理函数中判断当前滚动位置
如果到达边界且滚动方向会继续触发父元素滚动，就调用
preventDefault()阻止默认行为
代码实现如下：
const child = document.querySelector('.child');
function handleScroll(e) {
// 获取子元素滚动相关属性
const scrollTop = child.scrollTop;
const scrollHeight = child.scrollHeight;
const clientHeight = child.clientHeight;
// 判断是否已经滚动到顶部或底部
const isTop = scrollTop === 0;
const isBottom = scrollTop + clientHeight >= scrollHeight;
// 判断滚动方向
let direction = 0;
if (e.type === 'wheel') {
direction = e.deltaY > 0 ? 1 : -1; // 1向下 -1向上
} else if (e.type === 'touchmove') {
if (!this.startY) {
this.startY = e.touches[0].clientY;
}
const currentY = e.touches[0].clientY;
direction = currentY < this.startY ? 1 : -1; // 1向下 -1向上
this.startY = currentY;
}
// 到达顶部且继续向上滚动，或者到达底部且继续向下滚动，阻止默认行为
if ((isTop && direction === -1) || (isBottom && direction === 1)) {
e.preventDefault();
}
}
// 绑定事件
child.addEventListener('wheel', handleScroll, { passive: false });
child.addEventListener('touchmove', handleScroll, { passive: false });解决方案二：使用CSS属性overscroll-behavior
现代浏览器支持overscroll-behaviorCSS属性，该属性用于控制元素滚动到边界时的行为。将其设置为contain可以阻止滚动行为传播到父元素，实现起来非常简单。
只需要给子元素添加如下样式即可：
.child {
height: 200px;
overflow-y: auto;
background: #fff;
border: 1px solid #ddd;
/* 阻止滚动穿透 */
overscroll-behavior-y: contain;
}该方法的优点是代码简洁，不需要额外的JavaScript逻辑，但缺点是兼容性有限，旧版本浏览器（如IE、部分旧版移动端浏览器）不支持该属性，使用时需要确认目标用户的浏览器环境。
解决方案三：动态控制父元素滚动
另一种思路是当子元素处于可滚动状态时，临时禁止父元素的滚动，子元素滚动结束后再恢复父元素的滚动能力。这种方法适用于子元素滚动状态比较明确的场景。
实现步骤如下：
当子元素获得焦点或开始滚动时，给父元素设置
overflow: hidden当子元素失去焦点或滚动结束时，恢复父元素的
overflow属性
代码实现如下：
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
// 子元素开始滚动时禁止父元素滚动
child.addEventListener('touchstart', () => {
parent.style.overflowY = 'hidden';
});
child.addEventListener('wheel', () => {
parent.style.overflowY = 'hidden';
});
// 子元素滚动结束时恢复父元素滚动
child.addEventListener('touchend', () => {
// 延迟恢复，避免滚动结束瞬间的闪烁
setTimeout(() => {
parent.style.overflowY = 'auto';
}, 300);
});
child.addEventListener('mouseleave', () => {
parent.style.overflowY = 'auto';
});需要注意的是，这种方法修改父元素的overflow属性可能会导致页面布局轻微变化，尤其是当父元素原本有滚动条时，隐藏滚动条会出现内容偏移，需要提前做好样式适配。
方案对比与选择建议
我们可以根据项目需求选择合适的方案，以下是三种方案的对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 监听滚动事件判断边界 | 兼容性好，几乎所有浏览器都支持 | 需要编写较多逻辑，移动端和PC端事件需要分别处理 | 需要兼容旧浏览器的项目 |
| CSS overscroll-behavior属性 | 代码简洁，无需JavaScript逻辑 | 兼容性有限，旧浏览器不支持 | 面向现代浏览器的项目，如内部管理系统、新版本移动端应用 |
| 动态控制父元素滚动 | 逻辑简单，容易理解 | 可能导致布局偏移，恢复时机需要仔细处理 | 子元素滚动状态明确，父元素滚动条隐藏不影响布局的场景 |
注意事项
在使用上述方案时，还需要注意以下几点：
如果页面中同时存在多个嵌套滚动容器，需要逐层处理滚动穿透问题，避免遗漏
移动端测试时需要覆盖不同系统的浏览器，部分浏览器对滚动事件的处理可能存在差异
使用
preventDefault()时，如果事件监听器设置了passive: true，会无法生效，需要显式设置passive: false
如果需要查看完整的示例代码，可以访问示例网站（https://www.ipipp.com）获取相关资源。