recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - événement de fin de défilement

Il est nécessaire d'afficher et de masquer le défilement. La condition est la suivante : le menu est masqué lors du défilement et le menu s'affiche lorsque le défilement s'arrête. Cependant, je ne sais pas comment surveiller l'événement de fin de défilement.

伊谢尔伦伊谢尔伦2844 Il y a quelques jours1196

répondre à tous(3)je répondrai

  • 淡淡烟草味

    淡淡烟草味2017-06-14 10:56:32

    Placez le gestionnaire de fin dans l'événement scroll pour un traitement de retard continu. Il sera déclenché après l'arrêt de l'événement scroll.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <code>var scrollTimer

    const timeout = 400

    function handler () {

      // ...

    }

    document.addEventListener('scroll', () => {

      clearTimeout(scrollTimer)

      scrollTimer = setTimeout(handler, timeout)

    })</code>

    répondre
    0
  • 迷茫

    迷茫2017-06-14 10:56:32

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    <code>    // 防抖动函数 

        function debounce(func, wait, immediate) { 

            var timeout; 

            return function() { 

                var context = this, args = arguments; 

                var later = function() { 

                    timeout = null; 

                    if (!immediate) func.apply(context, args); 

                }; 

                var callNow = immediate & !timeout; 

                clearTimeout(timeout); 

                timeout = setTimeout(later, wait); 

                if (callNow) func.apply(context, args); 

            }; 

        }; 

            

        var myEfficientFn = debounce(function() { 

            // 滚动中的真正的操作 

        }, 250); 

            

        // 绑定监听 

        window.addEventListener('scroll', myEfficientFn);  </code>

    répondre
    0
  • 学习ing

    学习ing2017-06-14 10:56:32

    Vous pouvez envisager d'utiliser touch来模拟scroll,然后使用touchend
    如果一定要使用scroll,那就在scroll的回调中做延时处理,以jQuery comme exemple.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    <code>(function(){

      

        var special = jQuery.event.special,

            uid1 = 'D' + (+new Date()),

            uid2 = 'D' + (+new Date() + 1);

      

        special.scrollstart = {

            setup: function() {

      

                var timer,

                    handler =  function(evt) {

      

                        var _self = this,

                            _args = arguments;

      

                        if (timer) {

                            clearTimeout(timer);

                        } else {

                            evt.type = 'scrollstart';

                            jQuery.event.handle.apply(_self, _args);

                        }

      

                        timer = setTimeout( function(){

                            timer = null;

                        }, special.scrollstop.latency);

      

                    };

      

                jQuery(this).bind('scroll', handler).data(uid1, handler);

      

            },

            teardown: function(){

                jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );

            }

        };

      

        special.scrollstop = {

            latency: 300,

            setup: function() {

      

                var timer,

                        handler = function(evt) {

      

                        var _self = this,

                            _args = arguments;

      

                        if (timer) {

                            clearTimeout(timer);

                        }

      

                        timer = setTimeout( function(){

      

                            timer = null;

                            evt.type = 'scrollstop';

                            jQuery.event.handle.apply(_self, _args);

      

                        }, special.scrollstop.latency);

      

                    };

      

                jQuery(this).bind('scroll', handler).data(uid2, handler);

      

            },

            teardown: function() {

                jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );

            }

        };

      

    })();</code>

    répondre
    0
  • Annulerrépondre