ユーザーがjQueryで特定の要素にスクロールしたときにイベントをトリガーするにはどうすればよいですか?

ユーザーが jQuery で特定の要素にスクロールしたときにイベントをトリガーする

Web 開発では、多くの場合、ユーザーがスクロールしたときにイベントをトリガーする必要があります。ページ上の特定の要素までスクロールします。これは、コンテンツの公開や更新、アニメーションのトリガー、または通知の表示に役立ちます。

これを jQuery で実現するには、ウィンドウ オブジェクトのスクロール イベントを利用できます。ただし、単に $('#scroll-to').scroll() を使用するだけでは十分ではありません。スクロール イベントは現在ページに表示されている要素に対してのみ発生します。

代わりに、jQuery のoffset() 関数を使用してウィンドウに対する要素の位置を決定し、outerHeight() 関数を使用して高さを取得します。これらの値をウィンドウの高さおよびscrollTopの値と比較することで、要素が現在ユーザーのビューにあるかどうかを判断できます。

たとえば、次のコードは #scroll-to h1 要素のオフセットと高さを計算します。

$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
  if (wS > (hT + hH - wH)) {
    console.log('H1 is in the viewport!');
  }
});

この方法では、ページ上の位置に関係なく、h1 要素がユーザーのビューにスクロールするたびにイベントをトリガーできます。このコードを調整して、指定した要素が表示されたときに任意のアクションを実行できます。

以上がユーザーがjQueryで特定の要素にスクロールしたときにイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。