检查元素是否部分在视口中

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

迟到的答案，但大约一个月前，我写了一个函数，它可以确定一个元素在视口中的可见程度，以百分比衡量。我已经在 iphone/ipad 上的 chrome、firefox、ie11、ios 中对其进行了测试。当元素的 X 百分比（从 0 到 100 的数字）可见时，该函数返回 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) * 100)) < percentVisible ||
    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
  )
};

Answer 2

您需要基于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 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;