jQuery を使用して DIV がビューポートに表示されるようになったときを検出するにはどうすればよいですか?

jQuery を使用した DIV の可視性の変更への応答

jQuery は、ウィンドウ可視性イベントなどの DOM イベントを処理するための堅牢なフレームワークを提供します。この記事では、ビューポート内で特定の DIV 要素が表示されたときに特定のアクションをトリガーする方法について説明します。

カスタムの "isvisible" イベント ハンドラーの作成

jQuery は「isvisible」イベント ハンドラーをネイティブに提供しませんが、イベント リスナーを使用してカスタム ソリューションを実装できます。方法は次のとおりです:

$(function() {

  // Register a "isVisible" listener for the #contentDiv
  $('#contentDiv').on('isVisible', function() {
    alert("Div is now visible");
  });

  // Check for visibility changes and trigger the event
  $(window).scroll(function() {
    var topOfDiv = $('#contentDiv').offset().top;
    var bottomOfDiv = topOfDiv + $('#contentDiv').height();
    var topOfWindow = $(window).scrollTop();
    var bottomOfWindow = topOfWindow + $(window).height();

    if (topOfDiv >= topOfWindow && bottomOfDiv <= bottomOfWindow) {
      $('#contentDiv').trigger('isVisible');
    }
  });
});

.show() メソッドの拡張

または、既存の ".show()" メソッドを拡張して、カスタム メソッドをトリガーすることもできます。要素が表示された後の「afterShow」イベント。このアプローチのコード スニペットは次のとおりです:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj = $(this),
        newCallback = function() {
          if ($.isFunction(oldCallback)) {
            oldCallback.apply(obj);
          }
          obj.trigger('afterShow');
        };

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Use old show function with custom callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

以上がjQuery を使用して DIV がビューポートに表示されるようになったときを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。