如何檢測DOM元素是否部分偏離視口

我想知道是否有人對此有一個簡單的解決方案。我試圖檢測一個HTML元素的任何部分是否在視口之外。我試着利用下面的代碼：如何檢測DOM元素是否部分偏離視口

$.fn.isOnScreen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight();

帶給您的是Steven

我只能拿這個來當整個元素是不可見的工作了，但我只需要知道的一部分該元素位於視口之外。

當元素是視域之外，然後我把它不同的類，所以它會轉移到左邊，而不是使其可視一次。

喜歡的東西：

if(elementIsPartiallyOutsideViewport) { 
    ele.addClass('move-left'); 
}

任何想法？

來源

2014-02-10 Romes

的瀏覽器支持你想要功能如何工作？找到視口之外的元素並返回它，或者你將元素作爲參數，並希望返回一個布爾值？ – Zafar

某事的效果：如果（elementPartiallyOusideViewport）{ele.addClass（ '移動左'）}如果是有道理的你... – Romes

大多數瀏覽器已經支持getBoundingClientRect()方法。所以你可以嘗試下面的代碼。

function isElementInViewport (el) { 
    var rect = el.getBoundingClientRect(); 
    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&  
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
}

您只需將元素傳遞給函數，並得到false如果元素不是視口內部。

用法。

if (!isElementInViewport(el)) { 
    el.addClass('move-left'); 
}

編輯

只是一個補充。你可以得到更多的信息關於getBoundingClientRect()功能和here

來源

2014-02-10 22:34:30 Zafar

+1的提示['getBoundingClientRect（）']（HTTP：// MSDN .microsoft.com/EN-US /庫/ IE/ms536433（v = vs.85）的.aspx），這真棒。 –

這不會指示部分可見元素。只有在視口中完全可見的情況下，它纔會返回true。 – Kousha

如何檢測DOM元素是否部分偏離視口

回答

相關問題