CSS Grid父容器滚动后选子项触发页面自动滚动求助

• 设置了一个CSS Grid，属性为 grid-template-columns: repeat(auto-fill,minmax(70px,1fr));，其父元素配置了 max-height: 350px; overflow-y: auto; 属性
• 滚动到Grid列表下方选择项目时，整个页面会自动向下滚动；检查发现选中的Grid项会滚动到页面顶部（处于隐藏状态），触发了页面的自动滚动行为
• 尝试制作复现Demo未成功，怀疑和Iframe环境有关
• 当前通过给全局*选择器添加 max-height: -webkit-fill-available; 临时解决问题，但认为这不是正确的处理方式

1. 阻止焦点触发的页面滚动 #

这类问题通常是浏览器「滚动到焦点元素」的默认行为导致的——当Grid项被选中（获得焦点）时，浏览器会尝试让焦点元素在视口中可见，误触发了页面级滚动。可通过以下方式处理：

• JS事件拦截：给Grid项添加焦点事件处理，阻止默认滚动行为：

document.querySelectorAll('.grid-item').forEach(item => {
  item.addEventListener('focus', (e) => {
    e.preventDefault();
    // 仅在父容器内调整滚动位置，不影响页面
    item.scrollIntoView({ block: 'nearest', behavior: 'auto' });
  });
});

• CSS禁用焦点滚动（部分现代浏览器支持）：

.grid-item {
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
}

2. 移除全局样式的不合理设置 #

全局*选择器的max-height: -webkit-fill-available;会干扰所有元素的高度计算，建议：

• 直接移除该全局样式
• 给需要占满可用高度的特定容器单独设置height: 100%;或min-height: 100vh;，避免影响Grid父容器的滚动逻辑

3. 明确滚动上下文 #

给Grid父容器添加position: relative;，明确其作为独立滚动容器的上下文，防止浏览器误将页面作为滚动载体：

.grid-parent {
  max-height: 350px;
  overflow-y: auto;
  position: relative;
}

4. 禁用不必要的焦点 #

如果Grid项仅通过鼠标点击选择，不需要键盘焦点支持，可以设置tabindex="-1"阻止元素获得焦点，从根源避免滚动触发：

<div class="grid-item" tabindex="-1">...</div>

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