ホームページ > 記事 > ウェブフロントエンド > jQueryを使用して特定の要素がユーザーのビューポートに入ったときにイベントをトリガーするにはどうすればよいですか?
ユーザーが jQuery を使用して特定の要素にスクロールしたときにイベントをトリガーする
このシナリオでは、特定の要素が表示されたときにアラートを表示したいとします。 h1 要素 (ID が「scroll-to」) がユーザーのブラウザー ビューに入ります。これを実現するには、ページの上部からの要素のオフセットを計算し、現在のスクロール位置と比較します:
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) { console.log('H1 on the view!'); } });</code>
上記のコード:
要素がビューポートに入ったときに要素をフェードインするなど、他のアクションを実行するようにイベントを変更することもできます。
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) { $('#scroll-to').fadeIn(); } });</code>
さらに、検出ロジックを改善するために、要素が完全にビューポート内にあるかどうかを判断するチェックを追加できます。
<code class="javascript">$(window).scroll(function() { var elementOffsetTop = $('#scroll-to').offset().top; var elementHeight = $('#scroll-to').outerHeight(); var windowHeight = $(window).height(); var scrollTop = $(this).scrollTop(); if (scrollTop > (elementOffsetTop + elementHeight - windowHeight) && elementOffsetTop > scrollTop && (scrollTop + windowHeight > elementOffsetTop + elementHeight)) { //Do something } });</code>
この更新されたロジックにより、イベントがトリガーされるだけであることが保証されます。スクロール方向に関係なく、要素がビューポートに完全に表示されるとき。
以上がjQueryを使用して特定の要素がユーザーのビューポートに入ったときにイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。