嵌套div homelogo阻止父容器container滚动的原因排查

问题根源 #

当你给主滚动容器.container设置overflow-y: scroll后，浏览器的滚轮事件处理逻辑会优先将事件分配给鼠标当前悬停的元素：

• 如果悬停的元素（这里是#homelogo）自身没有可滚动的内容（即scrollHeight等于clientHeight，无溢出内容），部分浏览器不会自动将滚轮事件冒泡传递给父级滚动容器，导致滚轮操作失效。
• 当你移除.container的overflow-y: scroll时，页面滚动会 fallback 到<body>元素，此时滚轮事件直接作用于全局滚动，所以不管鼠标在哪个元素上都能滚动，但这会丢失你需要的滚动捕捉、隐藏滚动条等核心特性。

另外，你用背景图实现#homelogo并通过媒体查询切换样式的方式本身没问题，但如果#homelogo是通过padding-top或aspect-ratio维持宽高比的空div，这种“无内容容器”更容易触发浏览器的事件拦截行为。

解决方案 #

根据你的需求（保留.container的滚动特性，同时让#homelogo区域支持滚轮），可以选择以下方法：

方法1：让鼠标事件穿透#homelogo（最简单）

给#homelogo添加CSS属性，让它不捕获鼠标事件，事件直接传递给父容器：

#homelogo {
  pointer-events: none;
}

注意：如果#homelogo需要支持点击、hover等交互，这个方法不适用。

方法2：手动转发滚轮事件（保留交互）

通过JavaScript监听#homelogo的滚轮事件，手动将滚动行为传递给.container：

const homeLogo = document.getElementById('homelogo');
const container = document.querySelector('.container');

homeLogo.addEventListener('wheel', (e) => {
  e.stopPropagation();
  // 按原滚轮方向滚动父容器，behavior可根据需求改为'smooth'
  container.scrollBy({
    top: e.deltaY,
    behavior: 'auto'
  });
});

方法3：检查并移除干扰事件的CSS属性

如果#homelogo或它的父元素设置了以下属性，可能会阻止滚轮事件传递，需要移除或调整：

• touch-action: none：会禁用触摸和滚轮事件
• overflow: hidden：如果父元素设置了这个，可能会干扰事件冒泡

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