周末想做一个滚动加载图片的效果。在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); } }