React场景：如何不隐藏滚动条阻止父容器随子组件滚动？

核心思路是在子组件的滚轮事件中阻止事件冒泡并按需阻止默认行为，从事件传播层面切断父容器的滚动触发，同时保留组件自身的选择逻辑，且无需隐藏父容器滚动条。

具体实现方案 #

1. 基础版：完全阻止父容器滚动 #

在子组件的onWheel事件处理函数中，先阻止事件向上冒泡到父容器，再阻止浏览器默认的滚动行为，确保滚轮事件只作用于你的滚筒组件：

const handleRollerWheel = (e) => {
  // 阻止事件冒泡到父容器，避免父容器触发滚动
  e.stopPropagation();
  // 阻止浏览器默认滚动行为，防止页面或父容器滚动
  e.preventDefault();

  // 执行你的滚筒选择逻辑（示例：根据滚轮方向调整选中值）
  const direction = e.deltaY > 0 ? 1 : -1;
  adjustSelectedValue(direction);
};

2. 进阶版：边界时允许父容器滚动 #

如果需要在滚筒组件滚动到顶部/底部时，允许父容器正常滚动，可以增加边界判断，仅在组件未到边界时阻止默认行为：

const handleRollerWheel = (e) => {
  e.stopPropagation();
  
  // 获取滚筒组件的滚动容器（根据你的DOM结构调整选择器）
  const rollerContainer = e.currentTarget;
  // 判断是否到达滚动边界
  const isAtTop = rollerContainer.scrollTop === 0 && e.deltaY < 0;
  const isAtBottom = rollerContainer.scrollTop + rollerContainer.clientHeight >= rollerContainer.scrollHeight && e.deltaY > 0;

  // 仅当未到达边界时，阻止默认滚动行为
  if (!isAtTop && !isAtBottom) {
    e.preventDefault();
    // 执行滚筒选择逻辑
    const direction = e.deltaY > 0 ? 1 : -1;
    adjustSelectedValue(direction);
  }
};

为什么之前的方案无效？ #

• CSS方案（overflow-y: scroll、position: fixed）针对的是浏览器原生的scroll事件，而你使用的是onWheel直接监听鼠标滚轮输入，这类CSS规则无法拦截滚轮事件的传播。
• 鼠标移入移出切换类的方案，因事件频繁触发导致DOM重绘频繁，进而出现UI抖动，本质是通过DOM操作间接控制滚动，不如直接从事件处理层面解决高效。

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