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