Проверьте, отображается ли элемент в процентах после прокрутки?

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