Question

我的第二个元素中包含overflow-y :auto的HTML元素包含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; }

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

我已将情况减少到下面的代码

＆＃13;

<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>

＆＃13;

>>> p = re.compile('d.*e')
>>> list(filter(p.search, l))

＆＃13;

您可以尝试滚动粉红色元素或其他位置，在JSBin进行测试。

在CSS甚至JavaScript中是否有办法？

Answer 1

似乎直接向前，position:fixed和/或position:absolute，因为您现在可以从文档流中取出元素，就像它不存在一样，就像它有点只是有视觉效果。

正如我们所知，

position:absolute仍然会冒出它相对定位的祖先的滚动事件。

＆＃13;

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid;
  overflow-y: auto;
  /* Take this out to see the effect */
  position: relative;
}

p {
  height: 5000px;
  /* Mimic overflow */
}

.kid {
  height: 20px;
  width: 20px;
  border: 1px solid;
  position: absolute;
}

＆＃13;

<div class="parent">
  <div class="kid"></div>
  <p></p>
</div>

＆＃13;

然而position:fixed很特别，因为它相对于浏览器窗口（视口），它会冒泡浏览器的滚动事件。

＆＃13;

body {
  /* Mimic body has scrollbars */
  height: 5000px;
}

.parent {
  height: 100px;
  width: 100px;
  border: 1px solid;
  overflow-y: auto;
  /* Take this out to see the effect */
  position: relative;
}

p {
  /* Mimic overflow */
  height: 5000px;
}

.kid {
  height: 20px;
  width: 20px;
  border: 1px solid;
  position: fixed;
}

＆＃13;

<div class="parent">
  <div class="kid"></div>
  <p></p>
</div>

＆＃13;

基本上，你不能让固定位置元素冒泡它的父卷轴事件。

Answer 2

使用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) 
});

当然，delta值可以适应更闷的滚动。还可以添加一些限制以防止执行多个处理程序。

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

2 个答案: