onscroll for div

Question

div元素是否没有onscroll事件处理程序？ 我页面上的行为似乎并未表明div onscroll事件处理程序已被识别。

<div id='bd' onscroll='alert("Scroll Called");'></div>

另外，
根据DOM事件冒泡，div滚动事件是否会滚动到窗口滚动事件？

Answer 1

根据您使用的HTML版本，您可以使用onwheel事件。

onscroll事件仅在满足以下所有条件时才有效：

1. div包含overflow: auto，overflow: scroll，overflow-y: scroll等。
2. div目前有一个可以滚动的可见滚动条。
3. 鼠标移动实际上会导致滚动条滚动。

因此onscroll事件并不适合检测鼠标滚轮的一般移动。

请注意，onwheel事件是HTML 5中的新事件。According to w3schools，但它得到了广泛的支持。

Answer 2

我也在这个问题上摸不着头脑，直到我开始学习更多有关DOCTYPE指令的知识。最新版本的HTML规范不支持onscroll属性。它将在Visual Studio中显示为无效语法。它可能适用于许多浏览器，但它仍然是无效的代码。

相反，您可以使用Javascript或jQuery进行事件。我使用这样的方法在两个单独的div上同步滚动：

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
}); 

Answer 3

是的，但元素需要有一个滚动条。您可以使用overflow: auto（当内容足够高时为滚动条提供）或overflow: scroll。 （这些也可以专门设置为x＆amp; y以及overflow-y: scroll ...）

虽然div已经滚动到底部时它们不会冒泡，但窗口将开始滚动。 （基本上如果div可以滚动它会拦截滚动事件，但如果它不能那么它会转到页面）

Answer 4

我知道它可能不是你想要的，但是很多javascript框架可以帮助你解决这个问题。 div没有必要使用滚动条来挂钩滚动事件。

EG。 Mootools有mousewheel事件。 Demo here。 （它有滚动条，但您可以使用Firebug删除滚动条并尝试 - 它仍然有效。）

我自己在site上使用过这个问题。如果您在将鼠标悬停在图像上的同时进行滚动，则会阻止默认页面滚动，而是滑动图像栏。

Answer 5

JQUERY scroll（）可以帮助你。

$("#gridTableContainer").scroll(function() {
    HandlingScrollingStuff();
});