滚动后检查元素是否按百分比区域可见？答案

【问题标题】：Check if element is visible by percentage area after scrolling?滚动后检查元素是否按百分比区域可见？
【发布时间】：2015-12-03 22:55:59
【问题描述】：

如何检测可见性元素按百分比面积 50% 或更多？

Javascript：

var i = setInterval(function() {

var el = document.getElementById('test');
var rect = el.getBoundingClientRect();

if(
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth) == true) {
  var div = document.getElementById('log').innerHTML = 'Visible';
  //clearInterval(i);
}
  else {
    var div = document.getElementById('log').innerHTML = 'No visible';
  }

},1000);

JSFIDDLE

【问题讨论】：

那么问题是什么？您的 jsfiddle 似乎在 Firefox 和 Chrome 中都能正常工作。它最初显示“不可见”，但如果我将框滚动到视图中，它会变为“可见”。
我需要至少 50% 的被测元素在视线内。

标签： javascript scroll visibility percentage getboundingclientrect

【解决方案1】：

我将元素高度的 50% (rect.height/2) 添加到条件中。现在，即使元素只有 50% 可见，它也会检测到。

var i = setInterval(function() {

var el = document.getElementById('test');
var rect = el.getBoundingClientRect();
  console.log(window.innerHeight)  
  console.log(rect) 
if(
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight+(rect.height/2) || document.documentElement.clientHeight+(rect.height/2) ) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth) == true) {
  var div = document.getElementById('log').innerHTML = 'Visible';
  //clearInterval(i);
}
  else {
    var div = document.getElementById('log').innerHTML = 'No visible';
  }
},1000);

【讨论】：

谢谢。但这是不对的。看图片，50%的面积元素就在眼前。向右滚动，顶部/底部 - 一起滚动。