如何实现鼠标在蓝色区域内仍可滚动下层内容？

问题场景 #

页面中蓝色绝对定位元素（.account）覆盖在绿色滚动元素（.account-1）上方，需要实现：鼠标停留在蓝色区域内时，滚动滚轮仍能控制下层绿色区域的内容滚动。

解决方案 #

方法一：CSS pointer-events: none（无上层交互需求时首选） #

给上层蓝色元素添加pointer-events: none属性，让它不拦截鼠标事件，事件会自动穿透到下层滚动元素。

修改后的CSS代码：

.account {
  width: 200px;
  height: 600px;
  background-color: #0c82df;
  position: absolute;
  top: 0;
  left: 200px;
  z-index: 10;
  pointer-events: none; /* 添加此行 */
}

.account-1 {
  width: 500px;
  height: 800px;
  overflow-y: scroll;
  background-color: #00bfad;
}

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

注意：如果上层蓝色元素需要保留点击、hover等交互效果，此方法不适用，可选择下方的JS方案。

方法二：JavaScript监听滚轮事件（需保留上层交互时使用） #

监听上层元素的滚轮事件，手动计算滚动距离并设置下层元素的scrollTop值，实现滚动同步。

添加以下JavaScript代码：

const upperEl = document.querySelector('.account');
const scrollEl = document.querySelector('.account-1');

upperEl.addEventListener('wheel', (e) => {
  e.preventDefault();
  scrollEl.scrollTop += e.deltaY;
});

该方案既保留上层元素的交互能力，又能在滚轮操作时控制下层内容滚动。

示意图 #

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