HTML内容仅使用滚动条滚动,而不用鼠标滚轮滚动 [英] HTML content only scrolls with scrollbar, not mouse wheel
问题描述
我在页面上有一个固定高度的<div>
,并设置了overflow-y: scroll;
,以便当内容通过<div>
的底部边缘时,内容将滚动.没有什么不寻常的.
I have a <div>
on my page with a fixed height, and overflow-y: scroll;
set so that the content will scroll when it passes the bottom edge of the <div>
. Nothing out of the ordinary.
出于某些奇怪的原因,只有当光标位于<div>
中的空白空间上方或滚动条自身上方时,鼠标滚轮才会滚动内容.如果光标恰好位于<div>
中任何文本内容的上方,则鼠标滚轮将不执行任何操作.
For some bizarre reason, the mouse wheel will only scroll the content if the cursor is over empty space in the <div>
or if it's over the scrollbar itself. If the cursor happens to be over any of the text content in the <div>
, the mouse wheel won't do anything.
在Firefox和Chrome中都会发生这种情况,因此这不仅仅是特定渲染引擎的怪癖.
This happens in both Firefox and Chrome, so it isn't just a quirk of a particular rendering engine or something.
有问题的<div>
通过position: absolute;
覆盖在另一个<div>
上,因此我假设它后面的<div>
某种程度上干扰了鼠标滚轮事件-但是您会认为问题会反转(当光标位于文本上方而不是空白处时,<div>
将滚动 .)
The <div>
in question is overlaid on top of another via position: absolute;
, so I'm assuming that somehow the <div>
behind it is interfering with the mouse wheel event - but then you'd think the problem would be reversed (the <div>
would scroll when the cursor was over the text, not over the empty space).
其他人以前见过这样的东西吗?我很困惑!
Anyone else ever see anything like this before? I'm stumped!
推荐答案
Got it - it's because I was using the FancyBox mousewheel plugin. This causes FancyBox to capture all mousewheel events (for use with scrolling through galleries). Since I'm not actually using any galleries, I have no need for it, so I took it out and immediately that fixed my problem.
这篇关于HTML内容仅使用滚动条滚动,而不用鼠标滚轮滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!