如何使用 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中文網其他相關文章！