scroll事件在IE,chrome，FF中的行为表现

标签：scroll事件在ie   chrome   ff中的行为表现   

周末想做一个滚动加载图片的效果。在IE,chrome，FF中验证时，忽然发现了一个有趣的问题。

问题是这样的：

1.     我发现鼠标滚动一次，scroll事件的处理函数执行的次数不一样。

2.     滚动的距离也不一样。

3.     点击滚动条滚动时，执行次数，滚动距离也不一样。

经过验证：

       执行次数：

    在IE5，6，7，8下，滚动一次，函数执行4次；

    在IE9，10以上版本执行1次；

    在chrome下，只执行一次。（chrome版本号：34.0.1847.116 m）

    在FF下，居然执行了16-17次；（FF版本号：28.0）

如下图所示：

滚动的距离：

在IE5，6，7，8下，滚动一次，约为17-18px;

在IE9，10以上版本，滚动一次，约为35px左右；

在chrome下，滚动一次，100px，不存在误差，除非最后一次滚动时，距离顶部或者底部的距离小于100px；

FF下，滚动一次约为107px左右；

如下图所示：

点击滚动：

在IE5，6，7，8下，点击一次，执行8次，滚动总距离约为22px;

在IE9，10以上版本，点击一次，执行1次，滚动总距离约为25px左右；

在chrome下，点击一次，执行1次，滚动总距离40px,不存在误差；

在FF下，点击一次，执行7次，滚动总距离约为50px；

如下图所示：

相关测试代码如下：

 window.onload = function () {
	    	var pWdith = 530;//图片的高度
	    	var oldScrollValue = 0;
	    	var MaxScrollValue = 0;
	    	if(window.addEventListener){
	    		window.addEventListener("scroll", scrollHandler, false);
	    	} else {
	    		window.attachEvent("onscroll", scrollHandler, false);
	    	}
	    	function scrollHandler(event) {
	    		var scrollTopValue = document.body.scrollTop;
	    		if (document.documentElement.scrollTop) {
	    			scrollTopValue = document.documentElement.scrollTop;
	    		}
	    		MaxScrollValue = scrollTopValue;
	    		console.log("scrollHandler:" + MaxScrollValue);
	    	}
	    }

本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1673555

scroll事件在IE,chrome，FF中的行为表现

标签：scroll事件在ie   chrome   ff中的行为表现   

原文地址：http://shuizhongyue.blog.51cto.com/7439523/1673555