如何使滚动事件在固定定位元素上冒泡

Question

我有一个 HTML 元素，position: fixed在第二个元素中带有一个overflow-y :auto

当鼠标悬停在固定元素上时，滚动不会冒泡到它的父元素。移开时，会发生滚动。

我已将情况简化为下面的代码

main {
  /* I am the element that scrolls */
  height: 200px;
  display: flex;
  flex-flow: row nowrap;
  overflow-y: auto;
}

main section {
  flex: 1 1 800px;
  max-width: 800px;
}

main nav {
  flex: 1 1 auto;
  min-width: 100px;
}

main nav a {
  /* I am the element that prevent scroll on when hovering */
  position: fixed;
}

<main>
  <aside>
    <nav>
      <a href="#">left</a>
    </nav>
  </aside>
  <section>
    <p>Could be a long text...</p>
  </section>
  <aside>
    <nav>
      <a href="#">right</a>
    </nav>
  </aside>
</main>

您可以在JSBin 上通过尝试滚动粉红色元素或其他地方来测试它。

有没有办法在 CSS 中甚至在 JavaScript 中？

Answer 1

使用 JavaScript，您仍然可以处理该wheel事件并将其触发到父元素：

const fixedElts = document.querySelectorAll('nav a');
const parentElt = document.querySelectorAll('main');
const bubbleFixedScroll = e => {
    if(e.deltaMode){
       parentElt.scrollTop += e.deltaY;
    }
};
fixedElts.forEach( fixedElt => {
  fixedElt.addEventListener('wheel', bubbleFixedScroll) 
});

当然，增量值可以适应更平滑的滚动。还可以添加一些限制以防止执行太多处理程序。