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

Question

如何按百分比面积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

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