jQueryでスクロールが止まったらどうすればいいですか？

WebサイトのUI/UX向上において、スクロールイベントは重要な役割を果たします。特に、ユーザーのスクロール動作に合わせて特定のアクションを実行する場合、スクロールイベントの制御が欠かせません。この記事では、jQueryを用いてスクロールが完全に停止したことを検知し、任意の処理を実行する方法について解説します。

スクロールイベントの課題

スクロールイベントは、ユーザーがページをスクロールするたびに発生します。そのため、スクロール中に何度もイベントが発生し、パフォーマンスの低下や意図しない動作を引き起こす可能性があります。例えば、スクロール中に要素を表示する処理を単純に実装すると、スクロールが滑らかでなくなったり、表示がちらついたりする可能性があります。

setTimeoutとclearTimeoutによる解決策

スクロールが完全に停止したことを検知するために、setTimeoutとclearTimeoutを使用する方法が有効です。この方法では、スクロールが発生するたびにタイマーを設定し、一定時間内に再びスクロールが発生しなければ、スクロールが停止したと判断します。

具体的な手順は以下の通りです。

スクロールイベントが発生したら、setTimeoutを使用してタイマーを設定します。
タイマーが設定されている間に再びスクロールイベントが発生した場合は、clearTimeoutを使用してタイマーをクリアします。
タイマーが設定されてから一定時間内にスクロールイベントが発生しなければ、タイマーが完了し、スクロールが停止したと判断できます。

<script>
$(window).on('scroll', function() {
  // 既存のタイマーがあればクリア
  clearTimeout($(this).data('scrollTimeout'));

  // 200ミリ秒後に実行するタイマーを設定
  $(this).data('scrollTimeout', setTimeout(function() {
    // スクロールが停止した時の処理
    console.log('スクロールが停止しました。');
  }, 200));
});
</script>

コード解説

上記のコードでは、$(window).on('scroll', function() { ... });の部分でスクロールイベントを取得しています。スクロールが発生するたびに、以下の処理が実行されます。

clearTimeout($(this).data('scrollTimeout'));：既存のタイマーがあればクリアします。これにより、前回のスクロールイベントで設定されたタイマーがキャンセルされます。
$(this).data('scrollTimeout', setTimeout(function() { ... }, 200));：200ミリ秒後に実行するタイマーを設定します。タイマーが完了する前に再びスクロールイベントが発生した場合は、この処理が再度実行され、タイマーがリセットされます。
console.log('スクロールが停止しました。');：タイマーが完了した場合、つまり200ミリ秒間スクロールがなかった場合に実行される処理です。ここでは、コンソールにメッセージを出力しています。任意の処理を記述することができます。

使用例

スクロールが停止した時にボタンを表示する例を以下に示します。

<html>
<head>
  <title>スクロール停止時ボタン表示</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
  </style>
</head>
<body>

<button id="to-top">トップへ戻る</button>

<script>
$(window).on('scroll', function() {
  clearTimeout($(this).data('scrollTimeout'));

  $(this).data('scrollTimeout', setTimeout(function() {
    if ($(window).scrollTop() > 100) {
      $('#to-top').fadeIn();
    } else {
      $('#to-top').fadeOut();
    }
  }, 200));
});
</script>

</body>
</html>

まとめ

この記事では、jQueryを用いてスクロールが停止したことを検知する方法について解説しました。setTimeoutとclearTimeoutを使用することで、スクロールイベントを効率的に制御し、パフォーマンスの低下を防ぎながら、ユーザー体験を向上させることができます。

参考資料

よくある質問

質問	回答
タイマーの時間間隔はどのように決めればいいですか？	ユーザーのスクロール速度や処理の内容によって最適な時間間隔は異なります。一般的には、200〜300ミリ秒程度が適切です。
スクロールが停止した時の処理が重い場合はどうすればいいですか？	処理を軽量化するか、Web Workerなどの非同期処理を利用することを検討してください。
モバイル端末でも同じように動作しますか？	はい、モバイル端末でも同じように動作します。ただし、タッチイベントとスクロールイベントの関係は端末によって異なる場合があるため、注意が必要です。

その他の参考記事:jquery 動かない