jQuery でスクロール中に要素の可視性を検出するにはどうすればよいですか?

jQuery を使用したスクロール中の要素の可視性の検出

広範なコンテンツを含む Web ページをナビゲートする場合、ユーザーが特定の要素に到達したときに特定のアクションをトリガーすることが不可欠になります。この記事では、ユーザーが指定された HTML 要素までスクロールしたときに jQuery を使用してイベントをトリガーする方法を説明します。

要素のセットアップ

h1 要素が一番下に配置された HTML ページについて考えてみましょう。

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

jQuery を使用したイベントのトリガー

目的は、ユーザーのブラウザー ビューが h1 要素に到達したときにアラートを表示することです。最初は h1 要素に対してscroll() メソッドを使用しようとするかもしれません:

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

このアプローチでは望ましい結果は得られません。代わりに、ページに対する要素のオフセットを計算し、スクロール位置と比較する必要があります。

解決策

<code class="js">$(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 on the view!');
    }
});</code>

上記のコードは、h1 要素の下部があるかどうかを確認します。

機能拡張

• デモ Fiddle: 機能を直接体験してください。
• Alert の代わりに FadeIn(): 要素の可視性をシームレスにアニメーション化するには、fadeIn() を使用します。
• 要素の可視性チェック: 要素が完全にビューポート内にあるかどうかを検出するようにスクリプトを変更します。 、スクロール方向に関係なく。

以上がjQuery でスクロール中に要素の可視性を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。