javascript事件之滚动(scroll)事件

发布时间:2019-10-14编辑:脚本学堂
本文介绍下javascript的滚动(scroll)事件的用法,通过具体的例子深入学习与理解滚动(scroll)事件,有兴趣的朋友可以研究下。

在javascript中,虽然scroll事件在window对象上发生的,但它实际表示的则是页面中相应元素的变化。

在混杂模式下,可以通过body元素的scrollLeft和scrollTop来监控到这一变化;
而在标准模式下,除Safari之外的所有浏览器都会通过html元素来反映这一变化(Sfari仍然基于body跟踪滚动位置)。

例子:
 

复制代码 代码示例:
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
EventUtil.addHandler(window, "scroll", function () {
    if (document.compatMode == "CSS1Compat") {
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
})
 

以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的元素。
由于Safari 3.1之前的版本不支持document.compatMode,因此就版本的浏览器就会满足第二个条件。
与resize事件类似,scroll事件也会在文档被滚动期间重复被触发,所以请尽量保持事件处理程序的代码简单。