如何实现无需触发鼠标事件的平滑连续overscroll-behavior效果？

要实现子元素滚动到边界后无需鼠标操作的平滑连续滚动，有两种可靠方案：

1. CSS原生方案（推荐） #

利用CSS的overscroll-behavior属性控制滚动传递逻辑，配合scroll-behavior实现平滑过渡：

给子元素设置以下样式，允许滚动动作无缝传递到父元素：

.child-element {
  overscroll-behavior-y: auto; /* 针对垂直滚动，水平滚动用overscroll-behavior-x */
  overflow-y: auto; /* 确保子元素可滚动 */
}

给父元素添加平滑滚动特性：

.parent-element {
  scroll-behavior: smooth;
  overflow-y: auto; /* 确保父元素可滚动 */
}

设置后，当子元素滚动到顶部或底部边界时，继续滚动的动作会直接传递给父元素，无需额外鼠标操作，实现连续的平滑滚动体验。

2. JavaScript手动控制（兼容旧浏览器/自定义需求） #

如果需要兼容不支持overscroll-behavior的浏览器，或者要自定义滚动逻辑，可以通过监听滚轮事件手动传递滚动动作：

const child = document.querySelector('.child-element');
const parent = document.querySelector('.parent-element');

child.addEventListener('wheel', (e) => {
  const isAtTop = child.scrollTop === 0;
  const isAtBottom = child.scrollTop + child.clientHeight >= child.scrollHeight;

  // 到达顶部且向上滚动，或到达底部且向下滚动时，传递滚动给父元素
  if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
    e.preventDefault();
    parent.scrollBy({
      top: e.deltaY,
      behavior: 'smooth'
    });
  }
});

这段代码会拦截子元素的滚轮事件，在到达滚动边界时，将滚动动作同步到父元素，保持滚动的连续性和平滑性。

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