19

ページスクロールでイベントをバインドしたい場合は、を使用できますscroll();。

しかし、最終的にどのように発砲するscroll()のですか？

私はこれを再現したいと思います：

   $(window).scroll(function(){
    //do somenthing
    });

    $(window).scrollSTOPPED(function(){  //--> when i'm scrolling then i stop to scrolling (so NOT when page scrollbar is at the end top or bottom :)
    //do somenthing else
    });

何か案は？

4

4 に答える 4

46

小さなjqueryの方法

$.fn.scrollStopped = function(callback) {
  var that = this, $this = $(that);
  $this.scroll(function(ev) {
    clearTimeout($this.data('scrollTimeout'));
    $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
  });
};

最後のスクロール イベントから 250 ミリ秒後に、「scrollStopped」コールバックが呼び出されます。

http://jsfiddle.net/wtRrV/256/

lodash (さらに小さい)

function onScrollStopped(domElement, callback) {
  domElement.addEventListener('scroll', _.debounce(callback, 250));
}

http://jsfiddle.net/hotw1o2j/

純粋な js (技術的に最小)

function onScrollStopped(domElement, callback, timeout = 250) {
  domElement.addEventListener('scroll', () => {
    clearTimeout(callback.timeout);
    callback.timeout = setTimeout(callback, timeout);
  });
}

https://jsfiddle.net/kpsxdcv8/15/

奇妙な事実

clearTimeout および clearInterval パラメータを定義する必要はなく、間違ったタイプになったり、省略されたりすることさえあります。

http://jsfiddle.net/2w5zLwvx/

于 2012-12-26T01:23:58.773 に答える
2

scroll は、ユーザーが特定の増分だけスクロールするたびに発生する単一のイベントであるため、イベント自体は存在しません。

ただし、できることはイベントをエミュレートすることです。

これは James Padolsey の功績によるもので、彼の Web ページから引用します。コードとその実装方法を完全に理解するには、こちらをお読みください。

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

（関数（）{

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

あなたの質問に関連する質問がいくつかあることに注意してください。重複する可能性があります。例: Javascript: ユーザーがスクロールを完了した後にアクションを実行し、 JavaScriptでスクロールバーまたはマウスホイールをスクロールした後に Fire イベントを実行します。

于 2012-12-26T01:20:05.437 に答える
0

イベントで聴けるのがいいです。これが私がすることです：

jquery プラグイン:

+function(jQuery){
        var scrollStopEventEmitter = function(element, jQuery) {
            this.scrollTimeOut = false;
            this.element       = element;
            jQuery(element).on('scroll', $.proxy(this.onScroll, this));
        }

        scrollStopEventEmitter.prototype.onScroll = function() 
        {
            if (this.scrollTimeOut != false) {
              clearTimeout(this.scrollTimeOut);
            }

            var context = this;

            this.scrollTimeOut = setTimeout(function(){ context.onScrollStop()}, 250);
        }

        scrollStopEventEmitter.prototype.onScrollStop = function() 
        {
            this.element.trigger('scrollStop');
        }

        jQuery.fn.scrollStopEventEmitter = function(jQuery) {   
            return new scrollStopEventEmitter(this, jQuery);
        };

    }($);

この場合、ウィンドウは scrollStop イベントをトリガーします

$(window).scrollStopEventEmitter($);

scrollStopで聞くことができるようになりました

$(window).on('scrollStop',function(){
        // code
于 2014-09-10T01:17:45.720 に答える
0

かどうかを確認できますwindow.scrollY == 0

$(window).scroll(function(){
  if (window.scrollY == 0) {
    //...
  }
});

ただし、このイベントはスクロールごとに発生します。

于 2012-12-26T01:23:24.280 に答える