有没有办法只使用javascript检查一个元素在视口中是不是可见？ [复制]

Posted 2023-02-21

【中文标题】有没有办法只使用javascript检查一个元素在视口中是不是可见？ [复制]

【英文标题】：Is there any way to check if an element is visible in the viewport using only javascript? [duplicate]有没有办法只使用javascript检查一个元素在视口中是否可见？ [复制]

【发布时间】：2014-09-28 21:40:24

【问题描述】：

我目前正在处理一个小项目，其中有一张图片，我需要检查它是否在视口中可见。因此，如果用户可以看到它，那么我将触发一个功能，但如果没有，那么程序将什么也不做。这在 jQuery 中很容易完成，但我试图只使用 javascript。

【问题讨论】：

我不知道jQuery不是Javascript。

不，jQuery 是建立在 javaScript 之上的，它只是一个帮助您使用 javaScript 的库。它通过使用内置方法和辅助函数来帮助您。 en.wikipedia.org/wiki/JQuery

您似乎将 JavaScript 与此处的 DOM API 混淆了。

【参考方案1】：

我会使用getBoundingClientRect:

function on_screen(elt) 
  var rect = elt.getBoundingClientRect();

  return rect.top <= window.scrollY + window.innerHeight && 
    rect.bottom >= window.scrollY &&
    rect.left <= window.scrollX + window.innerWidth &&
    rect.right >= window.scrollX;

【讨论】：

对于一个完全 javascript 的解决方案，这是最可靠的。

【参考方案2】：

      var myStyle = document.getElementById("myDiv").offsetLeft;

      if(myStyle < 0)
          alert("Div is hidden!!");
       

第二个选项

     function isHidden(el) 
        var style = window.getComputedStyle(el);
        return (style.display === 'none')
     


     if(isHidden(document.getElementById("myDiv")))
           alert("Hidden");
     

【讨论】：

第一个根本不起作用，因为 offsetLeft 是针对偏移父项计算的。此外，即使它小于 0，元素的某些部分可能仍然可见。第二个根本不起作用，因为父元素可能有display: none，而子元素上的getComputedStyle 不会反映这一点。

【参考方案3】：

试试这个：

function isScrolledIntoView(elem)

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemPos = $(elem).position();
    var elemTop = elemPos.top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));


var elem = $('.yourElement');
isScrolledIntoView(elem);

如果您的元素在视口中方法返回 true，如果不在视口中则返回 false

【讨论】：

如果元素偏左或偏右，这将失败。另外，我认为 OP 正在寻找非 jQuery 解决方案。