web-dev-qa-db-ja.com

ユーザーがスクロールを停止したときのイベント

ユーザーがページをスクロールしたときに、ちょっとしたjQueryのようなことをしたいと思います。しかし、scroll（）メソッドしかないので、この問題にどのように取り組むかわからない。

何か案は？

javascriptjqueryjavascript-eventsscroll
52
dantz

scroll()には、ユーザーがスクロールするたびに上書きされるタイムアウトを設定できます。そうすれば、一定のミリ秒後にスクリプトが実行されると停止しますが、その間にスクロールすると、カウンターが最初からやり直され、スクリプトは再びスクロールが完了するまで待機します。

更新：

この質問には再びアクションがあったので、scrollEndイベントを追加するjQuery拡張機能で更新することも考えました。

// extension:
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
    alert('stopped scrolling');
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="height: 200vh">
  Long div
</div>
68
Stephan Muller

次に、ユーザーがスクロールを停止したときに関数を起動するためにsetTimeoutを使用する簡単な例を示します。

(function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        timer = setTimeout( refresh , 150 );
    });
    var refresh = function () { 
        // do stuff
        console.log('Stopped Scrolling'); 
    };
})();

スクロールイベントが発生している間、タイマーはクリアされます。スクロールが停止すると、更新機能が起動します。

またはプラグインとして：

$.fn.afterwards = function (event, callback, timeout) {
    var self = $(this), delay = timeout || 16;

    self.each(function () { 
        var $t = $(this);
        $t.on(event, function(){
            if ($t.data(event+'-timeout')) {
                clearTimeout($t.data(event+'-timeout'));
            }
            $t.data(event + '-timeout', setTimeout(function () { callback.apply($t); },delay));
        })
    });
    return this;
};

Divの最後のスクロールイベント（名前空間付き）の100ミリ秒後にコールバックを起動するには：

$('div.mydiv').afterwards('scroll.mynamespace', function(e) {
        // do stuff when stops scrolling
        $(this).addClass('stopped');
    }, 100
);

これをスクロールとサイズ変更に使用します。

60
Phil M

上記の同じ考えに基づいた別のより一般的なソリューションを次に示します。

var delayedExec = function(after, fn) {
    var timer;
    return function() {
        timer && clearTimeout(timer);
        timer = setTimeout(fn, after);
    };
};

var scrollStopper = delayedExec(500, function() {
    console.log('stopped it');
});

document.getElementById('box').addEventListener('scroll', scrollStopper);
10
xat

なぜそんなに複雑なのですか？ドキュメントが指摘しているように、これは http://jsfiddle.net/x3s7F/9/ が機能します！

$('.frame').scroll(function() {
 $('.back').hide().fadeIn(100);
}

http://api.jquery.com/scroll/ 。

注：WindowsのscrollイベントChromeは他のすべてとは異なります。スクロールする必要があります。 FFなどの結果と同じ結果をすばやく得る https://liebdich.biz/back.min.js "X"関数を見てください。

私のhow many ms a scroll eventテスト：

  • Safari、Mac FF、Mac Chrome：イベントごとに最大16ms。
  • Windows FF：イベント最大19ミリ秒。
  • Windows Chrome：スクロールが遅い場合、イベントは最大130ミリ秒です。
  • Internet Explorer：イベントは最大110ミリ秒。

http://jsfiddle.net/TRNCFRMCN/1Lygop32/4/ 。

2
loveNoHate

onScrollEnd議論したイベントを実装する必要もありました。タイマーを使用するというアイデアは私にとってはうまくいきます。

JavaScriptモジュールパターンを使用してこれを実装します。

var WindowCustomEventsModule = (function(){

    var _scrollEndTimeout = 30;

    var _delayedExec = function(callback){
        var timer;
        return function(){
            timer && clearTimeout(timer);
            timer = setTimeout(callback, _scrollEndTimeout);
        }
    };

    var onScrollEnd = function(callback) { 
        window.addEventListener('scroll', _delayedExec(callback), false);         
    };

    return {
        onScrollEnd: onScrollEnd
    }
})();

// usage example
WindowCustomEventsModule.onScrollEnd(function(){
    //
    // do stuff
    //
});

これが誰かを助ける/刺激することを願っています

1
Martin Kuzdowicz

「scrollEnd」などのイベントはありません。 setIntervalを使用してscroll()によって返される値を時々（たとえば200ミリ秒）確認し、現在の値と前の値の間のデルタを記録することをお勧めします。デルタがゼロになったら、それをイベントとして使用できます。

1
dpq

Jquery mobileの一部であるscrollstartおよびscrollstop関数があります。

Scrollstopを使用した例：

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

これが誰かを助けることを願っています。

1
Dima

例としてこれを行う簡単なコードからいくつかのコードを引き出しました（scroll.chainは、コールバック関数のコンテナーである2つの配列startとendを含むオブジェクトであることに注意してください）。また、ここではjQueryとアンダースコアを使用しています。

$('body').on('scroll', scrollCall);
scrollBind('end', callbackFunction);
scrollBind('start', callbackFunction);

var scrollCall = function(e) {
    if (scroll.last === false || (Date.now() - scroll.last) <= 500) {
        scroll.last = Date.now();
        if (scroll.timeout !== false) {
            window.clearTimeout(scroll.timeout);
        } else {
            _(scroll.chain.start).each(function(f){
                f.call(window, {type: 'start'}, e.event);
            });
        }
        scroll.timeout = window.setTimeout(self.scrollCall, 550, {callback: true, event: e});
        return;
    }
    if (e.callback !== undefined) {
        _(scroll.chain.end).each(function(f){
            f.call(window, {type: 'end'}, e.event);
        });
        scroll.last = false;
        scroll.timeout = false;
    }
};

var scrollBind = function(type, func) {
    type = type.toLowerCase();
    if (_(scroll.chain).has(type)) {
        if (_(scroll.chain[type]).indexOf(func) === -1) {
            scroll.chain[type].Push(func);
            return true;
        }
        return false;
    }
    return false;
}
0
whoughton