聚焦下拉框内元素时无法阻止主窗口滚动的问题

我使用一个自定义下拉菜单组件，组件内显示复选框列表。由于列表长度随用户不同而变化，我设置了max-height和overflow:auto，以便列表过长时允许滚动。但遇到一个问题：勾选列表底部附近的复选框时，主窗口会向下滚动，仿佛该复选框不在下拉框内，直接滚动到页面底部。

<div ref={ref} style={{ position: 'absolute', listStyle: 'none', zIndex: 9999 }}>
    <Region>  {/* Region adds the animation for opening */}
        <Card className="custom-simple-list"> {/* Override the overflow and margins/padding */}
            <CheckboxGroup className="margin-bottom-0" label="">
                {props.items.map((item) => (
                    <Checkbox key={item[1]} label={item[1]} id={item[0]} value={item[0]} checked={props.checkedFunc(item[0])}  onChange={() => props.onChange(item[0])}> </Checkbox>
                ))}
            </CheckboxGroup>
            <Button variant="link" onClick={props.clearAll}>Clear All</Button>
        </Card>
    </Region>
</div>

.custom-simple-list {
  margin: 0px !important;
  padding: 25px 25px 0px 15px !important;
  max-height: 20rem !important;
  overflow: auto !important; /* Scrollbar if items are too long */
}

• 阻止聚焦触发的主窗口滚动
  浏览器默认会将聚焦元素滚动到视口内，你可以在下拉容器上监听focusin事件，阻止默认行为并手动控制下拉容器内部滚动：

  useEffect(() => {
    const container = ref.current?.querySelector('.custom-simple-list');
    const handleFocusIn = (e) => {
      e.preventDefault();
      // 让下拉容器内部滚动到元素位置，而非主窗口
      e.target.scrollIntoView({ 
        block: 'nearest', 
        behavior: 'auto', 
        container: container 
      });
    };
    container?.addEventListener('focusin', handleFocusIn);
    return () => container?.removeEventListener('focusin', handleFocusIn);
  }, []);
  

• 强化下拉容器的独立滚动上下文
  给custom-simple-list添加CSS属性，明确告诉浏览器这是一个独立的滚动容器：

  .custom-simple-list {
    margin: 0px !important;
    padding: 25px 25px 0px 15px !important;
    max-height: 20rem !important;
    overflow: auto !important;
    contain: layout paint size; /* 标记为独立渲染容器 */
    scroll-behavior: auto; /* 禁用平滑滚动避免冲突 */
  }
  

• 禁用复选框的聚焦能力
  第三方组件可能在勾选时自动聚焦复选框，导致主窗口滚动。可以给复选框添加tabIndex="-1"让它不参与页面聚焦：

  <Checkbox 
    key={item[1]} 
    label={item[1]} 
    id={item[0]} 
    value={item[0]} 
    checked={props.checkedFunc(item[0])}  
    onChange={(e) => {
      e.preventDefault();
      props.onChange(item[0]);
    }}
    tabIndex="-1"
  />
  

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