如何实现鼠标在固定#widget上时滚动#overlay且保留其交互性？

方案1：JavaScript事件转发（推荐，不修改原有DOM结构） #

核心逻辑是监听#widget上的滚动事件，手动将滚动行为转发给#overlay，同时保留#widget的所有交互能力（点击、悬停等）。

代码实现 #

const widget = document.getElementById('widget');
const overlay = document.getElementById('overlay');

// 处理滚动事件转发
widget.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 同步overlay的滚动距离
  overlay.scrollTop += e.deltaY;
});

// 示例：保留widget的点击交互
widget.addEventListener('click', () => {
  console.log('widget被点击');
  // 这里可添加自定义交互逻辑
});

原有CSS和HTML结构无需修改，即可实现：鼠标在#widget上滚动时#overlay同步滚动，同时#widget全区域可响应点击、悬停等操作。

方案2：调整DOM结构（无JS依赖） #

将#widget移入#overlay内部，利用fixed定位的特性，既保持#widget的视口固定位置，又让滚动事件自然冒泡到#overlay。

修改后的HTML结构 #

<div id="parent">
  <div id="overlay">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <!-- 将widget移入overlay内部 -->
    <div id="widget"></div>
  </div>
  <div id="parent-content">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
  </div>
</div>

原有CSS保持不变即可：#widget的fixed定位仍相对于视口，不会随#overlay滚动移动；鼠标在#widget上滚动时，事件会冒泡到父元素#overlay触发滚动，同时#widget的交互不受影响。

方案3：CSS透明遮罩层（适合静态尺寸场景） #

创建一个与#widget尺寸、位置完全一致的透明遮罩，放在#overlay与#widget之间，让滚动事件穿透到#overlay，同时保留#widget的交互能力。

代码实现 #

添加遮罩层HTML

<div id="parent">
  <div id="overlay">
    <!-- 原有内容不变 -->
  </div>
  <div id="parent-content">
    <!-- 原有内容不变 -->
  </div>
  <!-- 新增遮罩层 -->
  <div id="widget-mask"></div>
  <div id="widget"></div>
</div>

添加遮罩层CSS

#widget-mask {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 1.5; /* 层级介于overlay和widget之间 */
  pointer-events: none; /* 允许事件穿透 */
}

该方案需保证遮罩层与#widget的尺寸、位置完全同步，适合#widget尺寸固定的场景。

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