div的滚动答案

【问题标题】：onscroll for divdiv的滚动
【发布时间】：2026-02-08 04:50:01
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

JQUERY scroll() 可以帮助你。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

你不应该相信微软所说的关于规格的一切。他们喜欢自己做，他们喜欢称他们为标准。 VS 让您感觉像 Word，“正确”和“有效”根据 MS。实际上，无论是否做怪癖，最终都只有 MS 依赖于 DOCTYPE；所有其他浏览器都只是显示 HTML。 Use MDN to learn HTML, CSS and JS！永远不要使用 w3schools，请在 w3fools.com 上阅读原因。 MSDN 适用于 IE，但不要依赖它们。 ps: onscroll 事件是 HTML5 规范的，没有 jQuery。
嗯，是的。这就是我在上面指出“它仍然无效”时所说的，即使 Visual Studio 将其显示为有效。

【解决方案4】：

我知道这可能不是您正在寻找的，但是很多 javascript 框架可以帮助您解决这个问题。 div 不必有一个滚动条来挂钩滚动事件。

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

我自己在 site 上使用过这个，我之前做了一段时间。如果您在将鼠标悬停在图像上的同时滚动，则会阻止默认页面滚动，而是滑动图像栏。

【讨论】：

【解决方案5】：

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

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

【讨论】：