檢查元素是否部分在視口中

Question

我試圖確定一個元素是部分還是完全在視口中。

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

任何幫助將不勝感激！

Answer 1

遲到的答案，但大約一個月前，我編寫了一個函數，它完全可以做到這一點，它確定元素在視口中的可見程度，以百分比為單位。 我已經在 iphone/ipad 上的 chrome、firefox、ie11、ios 中測試過它。 當元素的 X 百分比（從 0 到 100 的數字）可見時，該函數返回 true。 僅確定元素的測量值是否可見，而不確定元素是否以不透明度、可見性等方式隱藏。

const isElementXPercentInViewport = function(el, percentVisible) {
  let
    rect = el.getBoundingClientRect(),
    windowHeight = (window.innerHeight || document.documentElement.clientHeight);

  return !(
    Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100)) < percentVisible ||
    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
  )
};

Answer 2

您需要一個基於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>

Answer 3

 function partInViewport(elem) { let x = elem.getBoundingClientRect().left; let y = elem.getBoundingClientRect().top; let ww = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); let hw = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); let w = elem.clientWidth; let h = elem.clientHeight; return ( (y < hw && y + h > 0) && (x < ww && x + w > 0) ); } document.addEventListener("scroll", ()=>{ let el = document.getElementById("test"); if (partInViewport(el)) { document.getElementById("container").style.backgroundColor = "green"; } else { document.getElementById("container").style.backgroundColor = "red"; } });

 #test { height: 200px; width: 145px; background-color: grey; } #container { height: 400px; width: 345px; transform: translate(400px, 360px); background-color: red; display: grid; align-items: center; justify-items: center; } body { height: 1500px; width: 1500px; }

 <div id="container"> <div id="test"></div> </div>

我的這段代碼示例： https : //jsfiddle.net/xqpebwtv/27/

Answer 4

你的代碼說的是：

• 元素的頂部必須低於窗口的頂部，
• 元素的左側必須在窗口左側的右側，
• 元素的底部必須到窗口底部的頂部，並且
• 元素的右側必須在窗口右側的左側

你想要什么：

• 元素的頂部必須低於窗口的頂部或元素的底部必須高於窗口的底部，並且
• 元素的左側必須在窗口左側的右側或元素的右側必須在窗口右側的左側

從這里開始，代碼應該足夠簡單。

Answer 5

應該這樣做，不需要偏移量，因為我們正在比較客戶端矩形。

function isPartiallyVisibleInViewport(element, viewport) {
  var bound = element.getBoundingClientRect();
  var bound2 = viewport.getBoundingClientRect();
  return bound.bottom > bound2.top && bound.top < bound2.bottom;
}

此函數僅垂直檢查，如果您還想進行水平檢查，則必須擴展：

return bound.bottom > bound2.top && bound.top < bound2.bottom && bound.right > bound2.left && bound.left < bound2.right;