JavaScript 检查元素是否在屏幕上可见

在web开发中，有时候需要判断某个元素是否在屏幕上可见，以便执行一些相应的操作。下面是几种实现方法。

方法1：使用Element.getBoundingClientRect()方法

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left >= 0 &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

该函数接受一个HTML元素作为参数，返回一个布尔值，表示该元素是否在屏幕上可见。该函数使用getBoundingClientRect()方法获取元素在viewport中的位置，然后判断该位置是否在viewport内即可。

方法2：使用Intersection Observer API

function isElementInViewport(el) {
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      return entry.isIntersecting;
    });
  });

  observer.observe(el);
}

该函数接受一个HTML元素作为参数，返回一个布尔值，表示该元素是否在屏幕上可见。该函数使用IntersectionObserver API观察元素是否在viewport中可见，如果可见则返回true，否则返回false。

方法3：使用jQuery插件

(function($) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el) {
      function visPx(){
        var H = $(this).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
      } visPx();
      $(window).on("resize scroll", visPx);
    });
  };
}(jQuery));

该插件使用jQuery，接受一个回调函数作为参数，返回一个jQuery对象。该插件在每次resize或scroll事件发生时检查元素是否在viewport中可见，如果可见则执行回调函数。