chrome 正常,每滑一次滚轮,alert 1,2,3,4,5,6。。。 而火狐会莫名奇妙执行多次似的,第一次alert会输出不等值!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code>
<meta charset= "utf-8" >
<title>无标题文档</title>
<div style= "height:3000px;width:500px;background-color: green;margin-left: auto;margin-right: auto;" ></div>
<script type= "text/javascript" src= "http://test-10017943.file.myqcloud.com/jquery_2_2.js" ></script>
<script>
a = 0;
$(window).on( 'scroll' , function (){
b = a++;
alert(b);
});
</script>
</code>
|
ログイン後にコピー
ログイン後にコピー
参照这篇文章,关掉火狐平滑滚动,但是如果滚轮滑动的比较快,还是会出现问题。http://mozilla.com.cn/forum.phpmod=viewthread&tid=35551&highlight=Scroll
回复内容:
chrome 正常,每滑一次滚轮,alert 1,2,3,4,5,6。。。 而火狐会莫名奇妙执行多次似的,第一次alert会输出不等值!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code>
<meta charset= "utf-8" >
<title>无标题文档</title>
<div style= "height:3000px;width:500px;background-color: green;margin-left: auto;margin-right: auto;" ></div>
<script type= "text/javascript" src= "http://test-10017943.file.myqcloud.com/jquery_2_2.js" ></script>
<script>
a = 0;
$(window).on( 'scroll' , function (){
b = a++;
alert(b);
});
</script>
</code>
|
ログイン後にコピー
ログイン後にコピー
参照这篇文章,关掉火狐平滑滚动,但是如果滚轮滑动的比较快,还是会出现问题。http://mozilla.com.cn/forum.phpmod=viewthread&tid=35551&highlight=Scroll
throttle
debounce
requestAnimationFrame + customEvent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <code>;( function () {
var throttle = function (type, name, obj) {
obj = obj || window;
var running = false;
var func = function () {
if (running) { return ; }
running = true;
requestAnimationFrame( function () {
obj.dispatchEvent( new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
throttle ( "scroll" , "optimizedScroll" );
})();
window.addEventListener( "optimizedScroll" , function () {
console.log( "Resource conscious scroll callback!" );
});
</code>
|
ログイン後にコピー
原文