Question

我有一个小项目，我正在处理我有图像的地方，我需要检查它是否在视口中可见。因此，如果用户可以看到它，那么我将触发一个函数，但如果没有，那么程序将什么都不做。这在jQuery中很容易实现，但我只想使用javascript。

Answer 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;
}

Answer 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");
     }

Answer 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

有没有办法检查一个元素是否在视口中仅使用javascript可见？

3 个答案: