如何確定是否隱藏/溢出文本是在頂部或元素

Question

的底部，我想在

How to determine from javascript if an html element has overflowing content

上Shog9的回答擴張，我想知道這是否是隱藏的文本位於包含元素的頂部或底部（或者兩者都沒有）。

什麼是最好的方式去呢？

Answer 1

我無法看透樹木，不見森林。 Joel的代碼片段var isScrolledDown = el.scrollTop > 0;讓我意識到如何去做。我使用了兩個函數：

function HasTopOverflow(el) { 
    return el.scrollTop; 
} 

function HasBottomOverflow(el) { 
    var scrollTop = el.scrollTop, 
     clientHeight = el.clientHeight, 
     scrollHeight = Math.max(el.scrollHeight, clientHeight); 

    return (scrollTop + clientHeight) < scrollHeight; 
} 

還沒有測試過它是否可以在IE6 +上工作，但FF工作。

如果有任何錯誤，請讓我知道。

Answer 2

您可以結合scrollLeft和scrollTop與Shog的回答。

具體做法是：

// Author: Shog9 
// Determines if the passed element is overflowing its bounds, 
// either vertically or horizontally. 
// Will temporarily modify the "overflow" style to detect this 
// if necessary. 
// Modified to check if the user has scrolled right or down. 
function checkOverflow(el) 
{ 
    var curOverflow = el.style.overflow; 
    if (!curOverflow || curOverflow === "visible") 
     el.style.overflow = "hidden"; 

    var isOverflowing = el.clientWidth < el.scrollWidth 
     || el.clientHeight < el.scrollHeight; 

    // check scroll location 
    var isScrolledRight = el.scrollLeft > 0; 
    var isScrolledDown = el.scrollTop > 0; 

    el.style.overflow = curOverflow; 

    return isOverflowing; 
}