html - CSS - 在悬停固定子项时在父项内滚动
问题描述
我有一个内部可滚动的元素。在其中,有可以滚动的内容,以及一个position: fixed;
形成侧边栏的子项。
如果我将鼠标悬停在父级内部的任何位置并滚动,父级的内容会按预期滚动。但是,如果我将鼠标悬停在仍位于父级边界框内的固定子级内并滚动,它不会:
<style>
body,
html {
margin: 0;
}
#container {
position: relative;
width: 100%;
height: 100vh;
overflow-y: auto;
}
#sidebar {
position: fixed;
right: 10px;
width: 100px;
top: 10px;
height: calc(100% - 20px);
background-color: red;
}
</style>
<div id='container'>
<div id='sidebar'>
<a href='https://google.com/'>Link to click</a>
When hovering here, scroll does NOT work.
</div>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
... and so on. When hovering here, scroll works.
</div>
我了解此功能的使用,但我有兴趣使滚动事件仍从position:fixed;
子级向上传播到overflow:auto;
其父级,从而允许用户滚动父元素,即使在悬停子级时也是如此。这可能吗?
我已经尝试使用 JavaScript 来监视子级的滚动事件,然后将它们传递给父级,但是没有捕获到这样的滚动事件(我想是因为元素本身没有在内部滚动)。我还尝试了父元素(position:relative;
, position:absolute;
, position:fixed;
)的各种配置,但均无济于事。该问题仅在孩子被固定时才会出现,但将其设置为绝对不是一个选项。
最好,我希望在没有 JavaScript 的情况下完成此操作,因此可能的解决方案(仅 HTML、HTML 和 CSS,以及仅 JavaScript)的细分可能很有用。
我知道这个问题,但是那里的第一个答案不起作用,因为在悬停固定子项时滚动不会触发滚动事件(对于子项或父项)。第二个答案也不可行,因为它将孩子移到父母之外,这在我的情况下不是一个选择。
编辑: Harsh Karanpuria 建议我添加pointer-events: none;
到侧边栏。这确实实现了预期的结果,但它也使侧边栏中的元素不可点击,我宁愿不这样做!在他们回答之后,我还尝试再次制作侧边栏 pointer-events: all;
的子元素,但发现虽然这恢复了我单击它们的能力,但在悬停该孙子时再次删除了可滚动性质。
解决方案
您可以通过简单地添加来实现这一点。
#sidebar {
...
pointer-events: none;
...
}
推荐阅读
- ruby-on-rails - 如何让 url 不在 Rails 中编码
- ruby - 为什么浮点数的余数除以比自身更大的整数返回浮点数本身?
- laravel - laravel 将自定义另一个查询添加到 releatinship
- python - 如何使用numpy返回系列计算?
- arrays - 使用 Mongoose 更新嵌套数组中的项目
- c++ - 计算过去 60 秒的最低和最高温度
- flyway - 如何扩展flyway支持的数据库?
- javascript - 为什么 add_action 钩子不执行 js 代码
- javascript - 当div位于父div顶部时的javascript触发事件
- css - TreeSelect 在 Modal 中使用它并尝试打开它以查看它的元素时隐藏在后面