如何阻止子元素divB触发父元素divA的意外滚动？

divA 和 divB 是两个元素，设置 divA 的宽度为 200vw（窗口宽度的两倍）、高度为 200vh（窗口高度的两倍），并将 overflow 属性设为 hidden，意图禁止用户滚动该 div。但发现当通过 position:absolute 将更小的 divB 定位在 divA 上方时，用户将光标置于 divB 上仍能滚动 divA。请问如何阻止 divA 出现这种意外滚动？

对应的CSS代码：

.divA{
width: 200vw;
height: 200vh;
overflow: hidden;
padding-bottom: 100%;
}

.divB{
position: absolute;
top: 20%;
left: 20%;
width: 100px;
height: 100px;
}

• 给 divB 添加 pointer-events: none：该属性会让 divB 不接收任何鼠标事件，滚动操作无法传递到下方的 divA。注意：如果 divB 需要绑定点击、hover 等交互逻辑，此方法不适用。修改后的 divB 样式：

.divB{
position: absolute;
top: 20%;
left: 20%;
width: 100px;
height: 100px;
pointer-events: none;
}

• 给 divB 绑定滚动事件并阻止默认行为：若 divB 需要保留交互，可通过 JavaScript 拦截滚动事件。代码示例：

const divB = document.querySelector('.divB');
divB.addEventListener('wheel', (e) => {
  e.preventDefault();
});

此方法会直接阻止 divB 上的滚动行为，避免传递到 divA。

• 兼容移动端触摸滚动：若需要处理移动端的触摸滚动问题，给 divA 添加 touch-action: none 属性，禁止触摸引发的滚动：

.divA{
width: 200vw;
height: 200vh;
overflow: hidden;
padding-bottom: 100%;
touch-action: none;
}

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