【jQuery】スクロールイベントの処理速度

やりたいこと
スクロールが指定の位置にきたら処理を実行したい

コード

jquery
1$(window).scroll(function(){
2
3		var scrollCount = $(this).scrollTop();
4
5		if (scrollCount == 100) {
6			alert('OK');
7}
8	});

上記のようにコードを書いたところ、スクロール位置が「100」のところに来ても、スクロールが早かったりすると反応しません。
ゆっくりしたら反応するのですが、これを早くスクロールしても反応するようにするにはどうすればいいのでしょうか。

初歩的な質問かもしれませんが、ご教授お願いいたします。

行動規範の内容に同意します

回答3件

条件が==になっていますので、ぴったりな位置に合わせられなければ判定されません。そして、大きくスクロールする場合、値は飛び飛びになってしまいますので、そのままではうまく判定できません。

このような場合、「100の位置を超えたか」を記録しておいて、それが変化したときを拾う、という手段がいいかと思います。

javascript
1var aboveLine = true;
2
3$(window).scroll(function(){
4
5    var newAboveLine = $(window).scrollTop() <= 100;
6
7    if (abobeLine !== newAboveLine) {
8        alert('OK');
9        abobeLine = newAboveLine;
10    }
11});

投稿2017/11/21 05:39

maisumakun

総合スコア145183

ベストアンサー

if (scrollCount == 100) {

「飛び飛びになるからぴったり100pxになるとは限らない」が質問文に対する答えですが、
なぜこうしたかというと、1度しか実行してほしくないからですよね？

だって質問文の書き方をそのまま>= 100にしちゃうと、
スクロールする度にアラートに阻まれ、操作を受け付けなくなってしまいます。

というわけで、質問文のコードを少し弄って2つの問題を解決しました。
参考までにどうぞ。

JavaScript
1var isDone = false;
2$(window).scroll(function(){
3  var scrollCount = $(this).scrollTop();
4  if (scrollCount >= 100) {
5    if (!isDone) {
6      isDone = true;
7      alert('OK');
8    }
9  }
10});