子元素不可滚动时如何阻止滚动穿透到父元素？

通过CSS属性overscroll-behavior可以实现常规的滚动边界隔离：内部可滚动元素滚动到顶部/底部边界时，父元素不会响应滚动。但该属性存在覆盖盲区：当子元素内容高度小于容器高度、自身不产生滚动条时，在子元素区域触发的滚动操作会直接穿透到父元素，触发父元素滚动。要实现全场景的滚动隔离——即滚动操作发生在子元素区域时，无论子元素是否可滚动，都不触发父元素滚动，可通过以下方案实现。

初始复现代码 #

样式代码 #

.child {
  height: 5em;
  width: 5em;
  margin: 1em;
  background-color: lightgrey;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
}

.parent {
  height: 8em;
  overflow-y: scroll;
  border: solid;
}

结构代码 #

<div class="parent">
  If you try to scroll the first box, the outer box should never be scrolled. But if you try to scroll the second box, the outer box is scrolled, which is undesired.
  <div class="child">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10
  </div>
  <div class="child">
    1<br>2<br>3
  </div>
</div>

上述代码中，第一个内容充足的子元素滚动到边界时不会触发父元素滚动，第二个内容不足、无滚动条的子元素，在其区域滚动时会直接触发父元素滚动，是需要修复的问题。

overscroll-behavior仅在元素自身存在滚动条、滚动触达边界时生效，无滚动条的元素不会触发该属性的逻辑，因此需要补充事件拦截逻辑覆盖盲区。

方案1：纯CSS（兼容性有限） #

给子元素新增touch-action: none;属性，可拦截移动端触控场景的滚动穿透，但对桌面端鼠标滚轮场景无效，仅适合纯移动端页面使用。

方案2：CSS+JS（全场景兼容，推荐） #

1. 保留原有overscroll-behavior-y: contain配置，处理子元素可滚动时的边界穿透问题
2. 给需要隔离滚动的子元素绑定滚动事件，拦截向外传递的滚动事件，同时手动维护子元素自身的滚动逻辑，避免子元素本身无法滚动：

const scrollIsolateElements = document.querySelectorAll('.child');
scrollIsolateElements.forEach(el => {
  // 桌面端鼠标滚轮事件拦截
  el.addEventListener('wheel', e => {
    e.preventDefault();
    el.scrollTop += e.deltaY;
  }, { passive: false });

  // 移动端触控滑动事件拦截
  let touchStartY = 0;
  el.addEventListener('touchstart', e => {
    touchStartY = e.touches[0].clientY;
  }, { passive: true });
  el.addEventListener('touchmove', e => {
    e.preventDefault();
    const currentY = e.touches[0].clientY;
    el.scrollTop += touchStartY - currentY;
    touchStartY = currentY;
  }, { passive: false });
});

注意：绑定wheel和touchmove事件时必须传入{ passive: false }配置，否则浏览器会默认忽略事件中的preventDefault()调用，导致拦截失效。

该方案下，无论子元素内容是否足够产生滚动条，只要滚动操作发生在子元素区域，都不会触发父元素滚动；子元素内容超出时，自身滚动行为完全正常，满足交互一致性要求。

内容的提问来源于stack exchange，提问作者user