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

我试图确定元素是否在视口中部分是或完全。检查元素是否部分位于视口中

我发现这将决定一个元素是否完全在视图中，但在试图确定部分可见性时会一直困惑。我不想使用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) 
    ); 
}

任何帮助将不胜感激！

来源

2015-06-19 Kryptyx

您需要根据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>

来源

2015-06-19 17:30:05

如何将滚动位置放入它？基本上，这个想法是，页面上会有一个可能不在视图中的元素。一旦用户将该元素滚动到视图中（甚至部分），它应该会触发事件。我将通过绑定onscroll事件来处理事件触发器。我只是需要检测才能正常工作。感谢您的帮助！ – Kryptyx

http://stackoverflow.com/questions/2481350/retrieve-scrollbar-position-with-javascript –

答案是错误的。 – r3wt

你的代码说的是：

的元件的顶侧必须在窗口的顶侧下方，
的元素的左侧必须对窗口的左侧的右侧，
的底侧该元素必须是在窗口底部的顶部，
元素的右侧必须是

你想要的窗口右侧的左：

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

从中可以看出，代码应该足够简单。

来源

2015-06-19 17:31:31

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

回答

相关问题