如何确定是否隐藏/溢出文本是在顶部或元素

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; 
}