Question

我试图确定视口中的元素是部分还是完全。

我发现这将确定一个元素是否完全在视图中但在尝试确定部分可见性时仍然感到困惑。我不想使用jQuery。

基本上，我们的想法是页面上会有一个可能不可见的元素。一旦用户将该元素滚动到视图中，甚至部分地，它应该触发事件。我将通过绑定onscroll事件来处理事件触发器。我只是需要检测才能正常工作。

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    var html = document.documentElement;
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
    );
}

非常感谢任何帮助！

Answer 1

您需要基于element.offsetTop，element.offsetLeft，element.offsetHeight，element.offsetWidth，window.innerWidth和window.innerHeight

的解决方案

（视情况而定，您可能还需要考虑滚动位置）

function isInViewport(element){
  if(element.offsetTop<window.innerHeight && 
       element.offsetTop>-element.offsetHeight
     && element.offsetLeft>-element.offsetWidth
     && element.offsetLeft<window.innerWidth){
      return true;
    } else {
      
      return false;
    }
}



function test(){
  alert(isInViewport(document.getElementById("elem"))?"Yes":"No"); 
}

#elem{width: 20px; height: 20px; background: red; }
#elem{position: absolute;top: -9px;left: 600px;}

    <div id="elem"></div>
    <button onclick="test()">Check</button>

Answer 2

最新答案，但是大约一个月前，我编写了一个函数来执行此操作，该函数确定在视口中以百分比表示的可见元素数量。 Ive在iPhone / iPad上的chrome，firefox，ie11，ios中对其进行了测试。当元素的X百分比可见时，该函数返回true。仅确定元素的测量值是否可见，而不确定元素是否被不透明，可见性等隐藏。

const isElementXPercentInViewport = function(el, percentVisible) {
  let
    rect = el.getBoundingClientRect(),
    windowHeight = (window.innerHeight || document.documentElement.clientHeight);

  return !(
    Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
  )
};

Answer 3

function partInViewport(elem) {
    let x = elem.getBoundingClientRect().left;
    let y = elem.getBoundingClientRect().top;
    let ww = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    let hw = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    let w = elem.clientWidth;
    let h = elem.clientHeight;
    return (
        (y < hw &&
         y + h > 0) &&
        (x < ww &&
         x + w > 0)
    );
}

document.addEventListener("scroll", ()=>{
	let el = document.getElementById("test");
	if (partInViewport(el)) {
  	document.getElementById("container").style.backgroundColor = "green";
  } else {
  	document.getElementById("container").style.backgroundColor = "red";
  }
});

#test {
  height: 200px;
  width: 145px;
  background-color: grey;
}
#container {
  height: 400px;
  width: 345px;
  transform: translate(400px, 360px);
  background-color: red;
  display: grid;
  align-items: center;
  justify-items: center;
}
body {
  height: 1500px;
  width: 1500px;
}

<div id="container">
  <div id="test"></div>
</div>

我的代码示例： https://jsfiddle.net/xqpebwtv/27/

Answer 4

您的代码所说的是：

元素的顶部必须位于窗口顶部的下方，
元素的左侧必须位于窗口左侧的右侧，
元素的底部必须位于窗口底部的顶部，并且
元素的右侧必须位于窗口右侧的左侧

你想要什么：

元素的顶部必须位于窗口的顶部下方，或者元素的底部必须位于窗口的底部上方，并且
元素的左侧必须位于窗口左侧的右侧，或者元素的右侧必须位于窗口右侧的左侧

从中获取你的意思，代码应该很简单。

Answer 5

应该这样做，因为我们正在比较客户端矩形，所以不需要偏移。

function isPartiallyVisibleInViewport(element, viewport) {
  var bound = element.getBoundingClientRect();
  var bound2 = viewport.getBoundingClientRect();
  return bound.bottom > bound2.top && bound.top < bound2.bottom;
}

此功能仅垂直检查，如果您还想水平检查，则必须扩展：

return bound.bottom > bound2.top && bound.top < bound2.bottom && bound.right > bound2.left && bound.left < bound2.right;

检查元素是否部分位于视口中

5 个答案: