非滚动侧边栏滚动穿透问题：如何阻止主内容滚动？

方法1：监听滚轮/触摸滑动事件并拦截 #

当侧边栏内容不足无法滚动时，滚动事件会直接冒泡到下方的主内容区域。我们可以通过监听wheel（鼠标滚轮）和touchmove（触摸滑动）事件，判断侧边栏是否可滚动，再决定是否阻止事件传递。

实现逻辑 #

1. 给侧边栏添加事件监听，捕获滚动相关事件
2. 判断侧边栏是否可滚动：对比内容总高度(scrollHeight)和容器可视高度(clientHeight)，若前者大于后者则为可滚动状态
3. 若不可滚动，调用e.preventDefault()和e.stopPropagation()阻止事件向下传递

React代码示例 #

const Sidebar = () => {
  const sidebarRef = useRef(null);

  const handleScrollIntercept = (e) => {
    const sidebar = sidebarRef.current;
    const isScrollable = sidebar.scrollHeight > sidebar.clientHeight;
    if (!isScrollable) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  return (
    <div
      ref={sidebarRef}
      className="sidebar"
      onWheel={handleScrollIntercept}
      onTouchMove={handleScrollIntercept}
      style={{ overscrollBehaviorY: "contain" }}
    >
      {/* 侧边栏内容 */}
    </div>
  );
};

方法2：强制侧边栏始终可滚动（隐藏滚动条） #

通过CSS让侧边栏无论内容多少都保持可滚动状态，只是在内容不足时隐藏滚动条。这样overscroll-behaviour-y: contain属性就能一直生效，不会出现事件冒泡问题。

CSS代码示例 #

.sidebar {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  /* 隐藏滚动条，兼容多浏览器 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Chrome/Safari/Opera 隐藏滚动条 */
.sidebar::-webkit-scrollbar {
  display: none;
}

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