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


问题是这样的:

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

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

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

 

经过验证:

       执行次数:

    IE5678下,滚动一次,函数执行4次;

    IE910以上版本执行1次;

    chrome下,只执行一次。(chrome版本号:34.0.1847.116 m

    FF下,居然执行了16-17次;(FF版本号:28.0

 

如下图所示:

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


滚动的距离:

IE5678下,滚动一次,约为17-18px;

IE910以上版本,滚动一次,约为35px左右;

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

FF下,滚动一次约为107px左右;

如下图所示:

 

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


点击滚动:

IE5678下,点击一次,执行8次,滚动总距离约为22px;

IE910以上版本,点击一次,执行1次,滚动总距离约为25px左右;

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

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

 

如下图所示:scroll事件在IE,chrome,FF中的行为表现_FF中的行为表现_03


相关测试代码如下:

 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);
	    	}
	    }