[解決済み] 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
を使うべきですが、誰がそんなこと気にしますか?)
関連
-
[解決済み] ユーザーがDIVの外側をクリックしたときに、jQueryを使用してDIVを非表示にする
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryを使用してキーボードのEnterキーを押したことを検出する方法は?
-
[解決済み] アンカーリンクをクリックしたときのスクロールを滑らかにする
-
[解決済み] モーダルが開かれたときにBODYがスクロールしないようにする
-
[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は?
-
[解決済み] [ピュアJSやjQueryでエスケープキー押下を検出するには?
-
[解決済み] jQuery UI - 外でクリックされたらダイアログを閉じる
-
[解決済み] async-await from functionを使用して非同期関数から値を返すには?重複
-
[解決済み] JavaScriptの文字列は何バイトですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2 パスが存在しない場合に404や他のパスにリダイレクトする方法 [重複]について
-
[解決済み] Bootstrap モーダル:トグル時に背景がトップにジャンプする
-
[解決済み] コンソールで変数のトレースを行う場合、どのように改行すればよいのでしょうか?
-
[解決済み] async-await from functionを使用して非同期関数から値を返すには?重複
-
[解決済み] Facebook Reactでコードを再利用するためのミキシンとコンポーネントの使い分け
-
[解決済み] React Router v4 <NavLink>と<Link>の違いについて
-
[解決済み] JavaScriptの関数の順番:なぜそれが重要なのか?
-
[解決済み] Chrome DevToolsでソースマップを無効にする
-
[解決済み] AngularJS - $http.postがJSONの代わりにリクエストパラメータを送信する方法はありますか?
-
[解決済み] ネストされたJSONオブジェクト - すべてに配列を使用しなければならないのか?