用JavaScript去listen一个元素的scroll事件时,并非每滚动一个像素就触发一次scroll事件。当滚动得较快时,可能每滚动了几十像素才触发一次scroll事件。比如下面这个示例:
http://jsfiddle.net/q8gCf/1/
这就使得一些基于用户scroll的动画变得非常不流畅。
请问有没有什么比较好的解决方法?
改用 setInterval()
试试? 定时检测滚动条的位置,一旦发现变化就执行指定代码
setInterval((function(){
latestScrollTop = null;
return function(){
if(elm.scrollTop !== latestScrollTop) {
doSomeThing();
}
latestScrollTop = elm.scrollTop;
};
})(), 20);
动画用缓动效果