Javascript 为 div 滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2950382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onscroll for div
提问by The Machine
Does a div element not have an onscrollevent handler?
The behaviour on my page doesn't seem to indicate the div onscrollevent handler is recognized.
div 元素没有onscroll事件处理程序吗？我页面上的行为似乎并不表明 divonscroll事件处理程序被识别。
<div id='bd' onscroll='alert("Scroll Called");'></div>
Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?
此外，
根据 DOM 事件冒泡，div 滚动事件是否会汇总到窗口滚动事件？
回答by Sildoreth
Depending on which version of HTML you're using, you could use the onwheelevent, instead.
根据您使用的 HTML 版本，您可以改用该onwheel事件。
The onscrollevent works only if all the following are true:
onscroll仅当以下所有条件都为真时，该事件才有效：
- The div has
overflow: auto,overflow: scroll,overflow-y: scroll, etc. - The div currently has a visible scrollbar that can scroll.
- The mouse movement actually causes the scrollbar to scroll.
- 该div有
overflow: auto，overflow: scroll，overflow-y: scroll，等。 - div 目前有一个可以滚动的可见滚动条。
- 鼠标移动实际上会导致滚动条滚动。
So the onscrollevent is not really suited for detecting general mouse wheel movement.
所以该onscroll事件并不真正适合检测一般的鼠标滚轮移动。
Please note that the onwheelevent is new in HTML 5. According to w3schools, it is pretty widely supported, though.
请注意，该onwheel事件是 HTML 5 中的新事件。 根据 w3schools 的说法，它得到了广泛的支持。
回答by Ripside
I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.
我也在这个问题上摸不着头脑，直到我开始更多地了解 DOCTYPE 指令。最新版本的 HTML 规范不支持 onscroll 属性。它将在 Visual Studio 中显示为无效语法。它可能适用于许多浏览器，但它仍然是无效代码。
Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:
相反，您可以使用 Javascript 或 jQuery 来处理事件。我使用这样的方法在两个单独的 div 上同步滚动：
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
回答by Caleb
Yes but the element needs to have a scrollbar. You can give it one with either overflow: auto(which gives you a scrollbar when the content is tall enough) or overflow: scroll. (These can be set specifically for x & y as well overflow-y: scroll...)
是的，但该元素需要有一个滚动条。你可以给它一个overflow: auto（当内容足够高时给你一个滚动条）或overflow: scroll. （这些也可以专门为 x & y 设置overflow-y: scroll......）
Although they don't bubble once the div has been scrolled to the bottom the window will start scrolling. (Basically if the div can scroll it will intercept the scroll event, but if it can't then it will go to the page)
尽管它们不会在 div 滚动到底部后冒泡，但窗口将开始滚动。（基本上如果div可以滚动它会拦截滚动事件，但如果它不能那么它会转到页面）
回答by mqchen
I know it may not be exactly what you're looking for, but a lot of javascript frameworks can help you with this. It is not necessary for the div to have a scrollbar for you to hook to the scroll events.
我知道这可能不是您正在寻找的，但是很多 javascript 框架可以帮助您解决这个问题。div 没有必要有一个滚动条来让你挂钩滚动事件。
Eg. Mootools has the mousewheelevent. Demo here. (It has scrollbars, but you can use Firebug to remove the scrollbars and try -- it still works).
例如。Mootools 有mousewheel活动。演示在这里。（它有滚动条，但您可以使用 Firebug 删除滚动条并尝试 - 它仍然有效）。
I have used this myself on a siteI made a while back. If you scroll while holding your mouse over the images it prevents the default page scrolling and instead slides the image-bar.
我自己在不久前制作的网站上使用过这个。如果在将鼠标悬停在图像上的同时滚动，则会阻止默认页面滚动，而是滑动图像栏。
回答by MackMon
JQUERY scroll() can help you.
JQUERY scroll() 可以帮助你。
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
