1. ホーム
  2. javascript

[解決済み] jQuery scroll() は、ユーザーがスクロールを止めたことを検出する。

2022-05-13 01:33:01

質問

これでOK...

$(window).scroll(function()
{
    $('.slides_layover').removeClass('showing_layover');
    $('#slides_effect').show();
});

私の理解では、誰かがスクロールしているときはわかります。それで、私は誰かが停止したときにそれをキャッチする方法を見つけようとしています。上記の例から、私はスクロールが起こっている間、要素のセットからクラスを削除していることがわかります。しかし、私はユーザーがスクロールを停止したときにそのクラスを元に戻したいのです。

この理由は、ページがスクロールしている間、私が取り組んでいる特別な効果を与えるために、レイオーバーを表示させることを意図しているためです。しかし、スクロール中に削除しようとしている 1 つのクラスは、何らかの性質がある透明性の効果であるため、その効果と衝突します。

どのように解決するのですか?

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

更新

私は 拡張機能 を書き、jQuery のデフォルトの on -イベントハンドラ これは、選択された要素に1つ以上のイベントのイベントハンドラ関数をアタッチし、与えられた間隔の間、イベントがトリガーされなかった場合、ハンドラ関数を呼び出します。これは、リサイズイベントのように、遅延後にのみコールバックを起動させたい場合などに便利です。

更新のために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));

他のと同じように使う on または bind -イベントハンドラです。

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

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

(このデモでは resize の代わりに scroll を使うべきですが、誰がそんなこと気にしますか?)