복붙노트

[JQUERY] 사용자가 스크롤을 정지 할 때의 jQuery 스크롤 () 검출

JQUERY

사용자가 스크롤을 정지 할 때의 jQuery 스크롤 () 검출

해결법


  1. 1.

    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            // do something
            console.log("Haven't scrolled in 250ms!");
        }, 250));
    });
    

    최신 정보

    나는에 이벤트 핸들러 jQuery의 기본을 향상시키기 위해 확장을 썼다. 그것은 선택 요소에 하나 개 이상의 이벤트에 대한 이벤트 핸들러 함수를 부착하고,이 이벤트는 주어진 간격 트리거되지 않은 경우 핸들러 함수를 호출합니다. 당신이 resize 이벤트, 또는 같은 단지 지연 후에 콜백을 발사하려는 경우에 유용합니다.

    이 업데이트에 대한 github에-REPO를 확인하는 것이 중요합니다!

    https://github.com/yckart/jquery.unevent.js

    ;(function ($) {
        var on = $.fn.on, timer;
        $.fn.on = function () {
            var args = Array.apply(null, arguments);
            var last = args[args.length - 1];
    
            if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
    
            var delay = args.pop();
            var fn = args.pop();
    
            args.push(function () {
                var self = this, params = arguments;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.apply(self, params);
                }, delay);
            });
    
            return on.apply(this, args);
        };
    }(this.jQuery || this.Zepto));
    

    또는 바인드 이벤트 핸들러 다른처럼 사용하여, 당신이 마지막으로 추가 매개 변수를 전달할 수 있다는 점을 제외하고 :

    $(window).on('scroll', function(e) {
        console.log(e.type + '-event was 250ms not triggered');
    }, 250);
    

    http://yckart.github.com/jquery.unevent.js/

    (?!이 데모 사용하는 대신 스크롤의 크기를 조정,하지만 누가 관심)


  2. 2.jQuery를 디 바운스는이 같은 문제에 대한 좋은 하나입니다. jsFiddle

    jQuery를 디 바운스는이 같은 문제에 대한 좋은 하나입니다. jsFiddle

    $(window).scroll($.debounce( 250, true, function(){
        $('#scrollMsg').html('SCROLLING!');
    }));
    $(window).scroll($.debounce( 250, function(){
        $('#scrollMsg').html('DONE!');
    }));
    

    두번째 매개 변수는 "at_begin"플래그이다. 저는 여기에와 "스크롤 마무리" "시작 스크롤"에서 코드를 모두 실행하는 방법을 보여 주었다.

    배리 P, jsFiddle에 의해 제안, 밑줄 또는 lodash는 약간 다른 API를 가진 디 바운스 각이있다.

    $(window).scroll(_.debounce(function(){
        $('#scrollMsg').html('SCROLLING!');
    }, 150, { 'leading': true, 'trailing': false }));
    
    $(window).scroll(_.debounce(function(){
        $('#scrollMsg').html('STOPPED!');
    }, 150));
    

  3. 3.롭 W는 내가 여기에 기본적으로 내 원래의 것과 유사한 포스트이었다 스택에 또 다른 게시물을 확인 suggected. 나는이 사이트에 대한 링크를 발견을 통해 읽는 어떤 :

    롭 W는 내가 여기에 기본적으로 내 원래의 것과 유사한 포스트이었다 스택에 또 다른 게시물을 확인 suggected. 나는이 사이트에 대한 링크를 발견을 통해 읽는 어떤 :

    http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

    이것은 실제로 내 자신의 필요에 대한 약간의 조정 후 아주 멋지게 내 문제를 해결 도움이 결국 있지만, 모든 이상 비켜 시시한 이야기를 많이 도왔 내 자신에 그것을 알아내는 4 시간에 관하여 저를 저장했다.

    이 게시물은 몇 가지 장점을 갖고있는 것 같아요으로보고, 내가 다시 와서 링크가 저자가 이제까지 사이트와 다른 방향으로 가기로 결정하고 링크를 복용 결국 단지의 경우, 언급에 코드가 처음 발견 제공 할 생각.

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

  4. 4.당신이 스크롤을 중지 할 때 대신 충분히에 대한 스크롤 막대를 이동 중지 할 때 그 트리거로 타임 아웃이 충분히 정확한 아니었다 위해 나는 듣기 위의 의견의 일부 동의했다. 나는 더 나은 솔루션들이 스크롤 시작 자마자 마우스 (mouseup에)의 사용자시키는 이동을 수신하는 생각 :

    당신이 스크롤을 중지 할 때 대신 충분히에 대한 스크롤 막대를 이동 중지 할 때 그 트리거로 타임 아웃이 충분히 정확한 아니었다 위해 나는 듣기 위의 의견의 일부 동의했다. 나는 더 나은 솔루션들이 스크롤 시작 자마자 마우스 (mouseup에)의 사용자시키는 이동을 수신하는 생각 :

    $(window).scroll(function(){
        $('#scrollMsg').html('SCROLLING!');
        var stopListener = $(window).mouseup(function(){ // listen to mouse up
            $('#scrollMsg').html('STOPPED SCROLLING!');
            stopListner(); // Stop listening to mouse up after heard for the first time 
        });
    });
    

    그것의 예는이 JSFiddle에서 볼 수있는 작업


  5. 5.당신은 다음의 라인을 따라 그렇게 500ms마다 이상을 실행 간격을 설정할 수 있습니다 :

    당신은 다음의 라인을 따라 그렇게 500ms마다 이상을 실행 간격을 설정할 수 있습니다 :

    var curOffset, oldOffset;
    oldOffset = $(window).scrollTop();
    var $el = $('.slides_layover'); // cache jquery ref
    setInterval(function() {
      curOffset = $(window).scrollTop();
      if(curOffset != oldOffset) {
        // they're scrolling, remove your class here if it exists
        if($el.hasClass('showing_layover')) $el.removeClass('showing_layover');
      } else {
        // they've stopped, add the class if it doesn't exist
        if(!$el.hasClass('showing_layover')) $el.addClass('showing_layover');
      }
      oldOffset = curOffset;
    }, 500);
    

    이 코드를 테스트하지 않은,하지만 원칙이 작동합니다.


  6. 6.

    function scrolled() {
        //do by scroll start
        $(this).off('scroll')[0].setTimeout(function(){
            //do by scroll end
            $(this).on('scroll',scrolled);
        }, 500)
    }
    $(window).on('scroll',scrolled);
    

    시작과 끝 능력을 가진 아주 작은 버전


  7. 7.확인이 내가 전에 사용했던 것을 무언가이다. 기본적으로 당신이 보류에게 마지막 scrollTop에 심판을보고 (). 시간 제한 클리어 후에는 현재의 scrollTop을 (확인)하고이 같은 경우, 작업이 완료 스크롤입니다.

    확인이 내가 전에 사용했던 것을 무언가이다. 기본적으로 당신이 보류에게 마지막 scrollTop에 심판을보고 (). 시간 제한 클리어 후에는 현재의 scrollTop을 (확인)하고이 같은 경우, 작업이 완료 스크롤입니다.

    $(window).scroll((e) ->
      clearTimeout(scrollTimer)
      $('header').addClass('hidden')
    
      scrollTimer = setTimeout((() ->
        if $(this).scrollTop() is currentScrollTop
          $('header').removeClass('hidden') 
      ), animationDuration)
    
      currentScrollTop = $(this).scrollTop()
    )
    

  8. 8.또한 스크롤 시작을 점검와 ES6 스타일.

    또한 스크롤 시작을 점검와 ES6 스타일.

    function onScrollHandler(params: {
      onStart: () => void,
      onStop: () => void,
      timeout: number
    }) {
      const {onStart, onStop, timeout = 200} = params
      let timer = null
    
      return (event) => {
        if (timer) {
          clearTimeout(timer)
        } else {
          onStart && onStart(event)
        }
        timer = setTimeout(() => {
          timer = null
          onStop && onStop(event)
        }, timeout)
      }
    }
    

    용법:

    yourScrollableElement.addEventListener('scroll', onScrollHandler({
      onStart: (event) => {
        console.log('Scrolling has started')
      },
      onStop: (event) => {
        console.log('Scrolling has stopped')
      },
      timeout: 123 // Remove to use default value
    }))
    

  9. 9.JQuery와 모바일 scrollstop 이벤트를 확인하세요

    JQuery와 모바일 scrollstop 이벤트를 확인하세요

    $(document).on("scrollstop",function(){
      alert("Stopped scrolling!");
    });
    

  10. 10.아직이 여기에 필요한 사람들을위한 솔루션입니다

    아직이 여기에 필요한 사람들을위한 솔루션입니다

    () {(기능 $ var에 t; document.addEventListener ( '스크롤', 기능 (E) { 사항 clearTimeout (t); checkScroll (); }); checkScroll 함수 () { t =에서는 setTimeout (함수 () { 경고 ( '완료 스크롤'); }, 500); / * 당신은 * / 높이거나 타이머를 reduse 수 있습니다 } });


  11. 11.이 작업을해야합니다 :

    이 작업을해야합니다 :

    var Timer;
    $('.Scroll_Table_Div').on("scroll",function() 
    {
        // do somethings
    
        clearTimeout(Timer);
        Timer = setTimeout(function()
        {
            console.log('scrolling is stop');
        },50);
    });
    

  12. 12.다음은이 문제를 해결할 수있는 방법입니다 :

    다음은이 문제를 해결할 수있는 방법입니다 :

    VAR scrollStop = 함수 (콜백) { 경우 반환 (콜백 || 대해서 typeof 콜백 == '기능'!!) VAR isScrolling; window.addEventListener ( '스크롤', 함수 (이벤트) { window.clearTimeout (isScrolling); isScrolling =에서는 setTimeout (함수 () { () 콜백; }, 66); } 거짓); }; scrollStop (함수 () { CONSOLE.LOG는 ( '스크롤링을 정지했다.'); }); <메타 캐릭터 = "UTF-8"> <제목> 제목 . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다.로
    . 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림입니다. 그림. < BR>. 그림.로


  13. 13.이것은 (또는 변경) 글로벌 타이머를 사용하여 1 밀리 초 이후에 스크롤 정지를 검출 :

    이것은 (또는 변경) 글로벌 타이머를 사용하여 1 밀리 초 이후에 스크롤 정지를 검출 :

    var scrollTimer;
    
    $(window).on("scroll",function(){
        clearTimeout(scrollTimer);
        //Do  what you want whilst scrolling
        scrollTimer=setTimeout(function(){afterScroll()},1);
    })
    
    function afterScroll(){
        //I catched scroll stop.
    }
    
  14. from https://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling by cc-by-sa and MIT license