周末想做一个滚动加载图片的效果。在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);
}
}
时间： 2024-10-24 03:17:04