无溢出内容时overscroll-behavior失效，如何阻止滚动链？

默认情况下，overscroll-behavior: contain仅在元素内容确实溢出容器时才会生效，阻止滚动事件传递到body元素，这是浏览器的既定行为（已有相关Chromium工单记录该问题）。要实现内容未溢出时也阻止滚动链，可采用以下几种可行方案：

方案一：伪造溢出状态 #

给目标div内部添加一个高度略大于容器的空白元素，让浏览器判定容器存在溢出，从而激活overscroll-behavior: contain的作用：

<div style="overflow: scroll; overscroll-behavior: contain; height: 300px;">
  <div style="height: calc(100% + 1px);">
    <!-- 你的实际内容 -->
  </div>
</div>

如果不想显示微小的滚动条，可通过CSS隐藏：

.your-scroll-container::-webkit-scrollbar {
  display: none;
}
.your-scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

方案二：监听滚动事件手动阻止 #

通过JavaScript监听容器的滚动事件，在到达滚动边界时阻止事件传递：

const scrollContainer = document.querySelector('.your-scroll-container');
scrollContainer.addEventListener('wheel', (e) => {
  const isAtTop = scrollContainer.scrollTop === 0;
  const isAtBottom = scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight;
  
  // 当在顶部向上滚动、或在底部向下滚动时，阻止默认行为
  if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
    e.preventDefault();
  }
}, { passive: false });

注意需设置passive: false才能调用preventDefault()，但此属性可能对滚动性能有轻微影响，需根据场景权衡。

方案三：结合scroll-snap增强效果（可选） #

配合scroll-snap-type属性让容器在边界处锁定，增强阻止滚动链的体验，但仍需配合伪造溢出的方法才能生效：

.your-scroll-container {
  overflow: scroll;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
}
.your-scroll-container > * {
  scroll-snap-align: start;
}

以上方案均为绕过浏览器原生行为的 workaround，因为原生overscroll-behavior的滚动链阻止逻辑确实依赖元素的溢出状态。

内容的提问来源于stack exchange，提问作者Benjamin den Boer