如何实现鼠标在覆盖层上时也能滚动下方元素容器，类似YouTube顶部区域效果

核心问题原因 #

鼠标滚轮事件默认被上层覆盖层拦截，下层滚动容器收不到对应事件，因此无法触发原生滚动。自行通过scrollBy实现的滚动走JS主线程计算，无法调用浏览器 compositor 线程优化的原生滚动逻辑，所以会出现卡顿、不跟手的问题。

方案1：CSS事件透传（最优，和YouTube实现逻辑一致） #

直接给上层覆盖层添加CSS属性pointer-events: none，让覆盖层完全不响应任何鼠标交互事件，所有鼠标操作（包括滚轮、点击等）会直接穿透到下层元素，完全复用原生滚动逻辑，流畅度和无覆盖层的情况完全一致。
如果覆盖层上存在需要交互的按钮、链接等元素，单独给这些子元素添加pointer-events: auto即可，不影响其他区域的事件透传。
示例代码：

.overlay {
  pointer-events: none;
}
/* 覆盖层上的可交互元素单独开启事件响应 */
.overlay .interactive-element {
  pointer-events: auto;
}

方案2：滚轮事件转发（适合需要保留覆盖层部分交互逻辑的场景） #

如果确实需要在覆盖层上监听部分鼠标事件，没法直接用pointer-events透传，可以监听覆盖层的wheel事件，直接把事件转发给下层滚动容器，不需要自己实现滚动位移计算，完全复用原生滚动的处理逻辑：
示例代码：

const overlay = document.querySelector('.overlay')
const scrollContainer = document.querySelector('.scroll-container')

overlay.addEventListener('wheel', (e) => {
  // 阻止覆盖层默认的滚动行为（如果有的话）
  e.preventDefault()
  // 直接将原生滚轮事件分派给下层滚动容器，触发原生滚动
  scrollContainer.dispatchEvent(new WheelEvent('wheel', e))
})

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