ホームページ > バックエンド開発 > PHPチュートリアル > javascript - 火狐浏览器不能正确执行$(window).on('scroll', function(){})?

javascript - 火狐浏览器不能正确执行$(window).on('scroll', function(){})?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-06 20:18:52
オリジナル
2080 人が閲覧しました

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

    };

 

    /* init - you can init any event */

    throttle ("scroll", "optimizedScroll");

})();

 

// handle event

window.addEventListener("optimizedScroll", function() {

    console.log("Resource conscious scroll callback!");

});

</code>

ログイン後にコピー

原文

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート