如何使用 jQuery 确定元素是否在视口中

在 Web 开发中，我们经常需要判断页面上的某些元素是否处于用户的视口（Viewport）中，以便在应用相应的交互效果。本文将介绍如何使用 jQuery 实现这个功能。

方法一：使用 $.fn.isOnScreen()

jQuery 为 DOM 元素扩展了一个 $.fn.isOnScreen() 方法，用于判断指定元素是否处于视口中。下面是一个简单的例子：

$.fn.isOnScreen = function() {

  var win = $(window);

  var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
  };
  viewport.right = viewport.left + win.width();
  viewport.bottom = viewport.top + win.height();

  var bounds = this.offset();
  bounds.right = bounds.left + this.outerWidth();
  bounds.bottom = bounds.top + this.outerHeight();

  return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

使用方法跟其他 jQuery 方法一样，示例代码如下：

if ($('#element').isOnScreen()) {

  // 元素处于视口中

} else {

  // 元素不在视口中

}

方法二：使用 $.fn.inView()

除了 $.fn.isOnScreen() 外，jQuery 还带有一个 $.fn.inView() 方法，用于判断元素是否在浏览器窗口中。该方法接受一个可选参数，表示元素至少在视图中出现多长时间后才会被视为可见。下面是示例代码：

$.fn.inView = function(d) {

  var wh = $(window).height(),
      wt = $(window).scrollTop(),
      wb = wt + wh,
      eh = $(this).outerHeight(),
      et = $(this).offset().top,
      eb = et + eh;

  if (typeof(d) == 'number') {
    eb -= d;
  }

  return (eb > wt && et < wb);

};

使用方法跟前面类似，示例代码如下：

if ($('#element').inView()) {

  // 元素可见

} else {

  // 元素不可见

}

总结

本文介绍了两种使用 jQuery 判断元素是否在视口中的方法，对于开发 Web 应用时实现页面滚动加载等交互效果非常有用。如果你有其他方法或者更好的实现，欢迎在评论区分享。