檢查元素是否部分位於視口中

我試圖確定元素是否在視口中部分是或完全。檢查元素是否部分位於視口中

我發現這將決定一個元素是否完全在視圖中，但在試圖確定部分可見性時會一直困惑。我不想使用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

檢查元素是否部分位於視口中

回答

相關問題