如何在保留固定元素指针交互的同时，实现页面任意位置滚动指定元素？

问题背景 #

我最近卡在一个页面交互需求上：想让页面任意位置滚动时，都能触发某个特定元素的滚动，哪怕鼠标没悬停在这个元素上。原本打算把需要滚动的div放在顶层加透明背景，但页面上还有必须能正常点击交互的导航菜单，这个方法行不通。

试过用pointer-events: none;，虽然能实现全局滚动指定元素，但会导致固定区域里的导航完全失去交互性，这显然不是我要的结果。CSS有时候真的太棘手了，明明只是改个样式，结果却影响了元素的交互逻辑，我已经耗了好几个小时，真不想为了这个bug从头重构，更不想每次加个CSS属性都要反复测试页面兼容性。

下面是我页面结构的示例代码：

CSS代码

html {
  overflow: hidden;
}

.fixed {
  position: fixed;
  background-color: blue;
  width: 50%;
}

.scrollable {
  background-color: red;
  height: 100vh;
  padding-left: 50%;
  overflow-y: scroll;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="fixed">
    <h1>
    Lorem ipsum dolor sit amet
    </h1>
    <!-- 这里包含需要交互的导航元素 -->
  </div>
  <div class="scrollable">
    <ul>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
       <li>_________</li>
     </ul>
   </div>
</body>
</html>

现在的困境是：滚动蓝色fixed区域时，红色scrollable区域不会响应；用pointer-events: none虽然能解决滚动问题，但会让fixed里的导航失效。有没有办法实现页面任意位置滚动都能控制指定div滚动，同时保留固定元素的指针交互？

解决方案：用JavaScript监听全局滚轮事件 #

通过JS监听整个页面的滚轮事件，把滚动的位移值直接传递给目标滚动元素，这样既不会破坏fixed元素的交互性，又能实现全局滚动控制指定div的效果。

实现代码

// 获取需要被控制滚动的目标元素
const scrollableEl = document.querySelector('.scrollable');

// 监听全局滚轮事件
document.addEventListener('wheel', (e) => {
  // 阻止默认的页面滚动行为（避免冲突）
  e.preventDefault();
  // 将滚轮的垂直位移应用到目标元素
  scrollableEl.scrollTop += e.deltaY;
  // 如果需要支持水平滚动，可以添加这行：
  // scrollableEl.scrollLeft += e.deltaX;
}, { passive: false });

关键说明 #

• 这个方法不会影响.fixed元素内的任何交互，因为我们只是监听了滚轮事件，没有修改元素的pointer-events属性。
• passive: false是必须的配置，这样我们才能调用e.preventDefault()来阻止默认的页面滚动行为。
• deltaY在所有现代浏览器中都能正常工作，不需要额外的兼容性处理。

备注：内容来源于stack exchange，提问作者ClassicRanch