如何防止子元素不可滚动时父元素滚动
在前端开发中，我们经常会遇到这样的场景：页面中有一个可滚动的父容器，内部嵌套了一个不可滚动的子元素，或者子元素滚动到边界后，继续滚动会触发父容器的滚动。这种问题会影响用户体验，尤其是在移动端或者嵌套滚动结构的页面中。本文将介绍几种常见的解决方案，帮助开发者避免这类问题。
问题场景说明
假设我们有如下结构的页面：外层是一个可滚动的父容器，内层是一个不可滚动的子元素，当我们在子元素区域滚动鼠标滚轮或者触摸滑动时，父容器会跟随滚动，这不符合我们的预期。示例结构如下：
<div class="parent"> <div class="child"> 我是不可滚动的子元素内容，当我被滚动操作时，不希望触发父容器的滚动 </div> <div class="other-content"> 父容器的其他内容，父容器本身是可以滚动的 </div> </div>
对应的基础样式如下：
.parent {
width: 300px;
height: 400px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
}
.child {
width: 100%;
height: 200px;
background-color: #f0f0f0;
margin-bottom: 20px;
}
.other-content {
height: 600px;
background-color: #e8f4ff;
}解决方案一：监听子元素滚动事件并阻止默认行为
当子元素不可滚动时，我们可以给子元素绑定滚动相关事件，在事件触发时阻止默认行为，避免滚动事件冒泡到父容器。需要注意的是，鼠标滚轮事件和移动端的触摸滚动事件需要分别处理。
1. 处理鼠标滚轮事件
对于PC端，我们可以监听子元素的wheel事件，在事件回调中调用preventDefault方法阻止默认滚动行为：
const child = document.querySelector('.child');
child.addEventListener('wheel', function(e) {
// 阻止默认滚动行为，避免触发父容器滚动
e.preventDefault();
}, { passive: false });这里需要注意，wheel事件在某些浏览器中默认是被动事件，无法调用preventDefault，因此我们需要设置{ passive: false }来关闭被动模式，确保可以正常阻止默认行为。
2. 处理移动端触摸滚动事件
对于移动端，触摸滚动会触发touchmove事件，我们可以同样监听这个事件并阻止默认行为：
child.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });解决方案二：通过CSS属性限制滚动
除了JS事件监听的方式，我们还可以通过CSS属性来避免父容器被误触发滚动。核心思路是让子元素区域滚动时，不会将滚动事件传递到父容器。
1. 设置子元素的overscroll-behavior属性
overscroll-behavior是CSS中用于控制滚动溢出行为的属性，当设置为contain时，会阻止滚动链传递到父容器，也就是子元素的滚动边界不会触发父容器的滚动。
.child {
width: 100%;
height: 200px;
background-color: #f0f0f0;
margin-bottom: 20px;
/* 阻止滚动链传递到父容器 */
overscroll-behavior: contain;
}这种方式不需要额外的JS代码，兼容性也较好，现代浏览器基本都支持该属性。如果子元素本身是可滚动的，当滚动到边界时，也不会触发父容器的滚动。
2. 给父容器设置滚动隔离
如果父容器需要滚动，而子元素不需要，也可以给父容器设置overscroll-behavior: auto（默认值），同时给子元素设置overflow: hidden，确保子元素本身不会产生滚动行为，避免滚动事件触发：
.child {
width: 100%;
height: 200px;
background-color: #f0f0f0;
margin-bottom: 20px;
/* 明确子元素不可滚动 */
overflow: hidden;
}解决方案三：动态判断子元素滚动状态
如果子元素本身是可滚动的，但是我们只希望在子元素滚动到边界后，才允许父容器滚动，这时候就需要动态判断子元素的滚动位置，再决定是否阻止滚动事件。
示例代码如下：
const childScrollable = document.querySelector('.child-scrollable');
childScrollable.addEventListener('wheel', function(e) {
const { scrollTop, scrollHeight, clientHeight } = this;
// 判断滚动方向，以及是否滚动到边界
const isScrollUp = e.deltaY < 0;
const isScrollDown = e.deltaY > 0;
// 向上滚动且已经到顶部，或者向下滚动且已经到底部，才允许父容器滚动，否则阻止默认行为
if ((isScrollUp && scrollTop === 0) || (isScrollDown && scrollTop + clientHeight >= scrollHeight)) {
// 不阻止，让事件冒泡到父容器
return;
}
e.preventDefault();
}, { passive: false });对应的可滚动子元素样式：
.child-scrollable {
width: 100%;
height: 200px;
overflow-y: auto;
background-color: #f0f0f0;
margin-bottom: 20px;
}方案对比与选择
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| JS事件监听阻止默认行为 | 兼容性好，可以精确控制各种交互场景 | 需要写额外的JS代码，移动端需要注意被动事件的问题 | 所有需要阻止子元素触发父容器滚动的场景 |
| CSS overscroll-behavior属性 | 无需JS代码，实现简单 | 旧版本浏览器兼容性稍差（如IE不支持） | 现代浏览器环境，子元素滚动到边界不需要父容器跟随滚动的场景 |
| 动态判断滚动状态 | 可以灵活控制子元素滚动到边界后才允许父容器滚动 | 逻辑相对复杂，需要判断滚动位置和方向 | 子元素本身可滚动，需要边界判断的场景 |
注意事项
使用JS阻止默认行为时，一定要注意被动事件的设置，否则
preventDefault可能不生效。如果页面中使用了第三方滚动库，需要注意这些库可能已经处理了滚动事件，避免冲突。
移动端测试时，要覆盖不同的触摸交互场景，确保滚动行为符合预期。
如果子元素内部有可交互的元素（如输入框、按钮），要避免滚动事件监听影响这些元素的正常操作。
通过以上几种方案，我们可以有效解决子元素不可滚动时父元素误滚动的问题，根据实际场景选择合适的实现方式即可。