如何使滚动事件在固定位置元素上冒泡
如何使滚动事件在固定位置元素上冒泡
提问于 2018-06-11 16:18:54
我在第二个具有position: fixed的元素中有一个带有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;
}<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中有什么方法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-12 08:37:23
使用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)
});当然，增量值可以调整为闷滚动。此外，还可以添加一些节流以防止许多处理程序被执行。
Stack Overflow用户
发布于 2018-06-11 16:51:55
position:fixed和/或position:absolute现在可能会将元素从文档流中删除，就好像它不存在一样，就好像它只是为了视觉效果而存在一样。
据我们所知，position:absolute仍然可以将它相对定位的祖先的滚动事件泡起来。
.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;
}<div class="parent">
<div class="kid"></div>
<p></p>
</div>
但是，position:fixed是特殊的，因为它相对于浏览器窗口(viewport)，它会使浏览器的滚动事件出现气泡。
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;
}<div class="parent">
<div class="kid"></div>
<p></p>
</div>
基本上不能使固定位置元素气泡起来--它的父滚动事件.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50802102
复制相关文章
相似问题
腾讯云开发者
