Question

我有一个300px的div。此DIV包含不同的图标，如果图标太多，则由于overflow:hidden而无法看到它们我如何以编程方式检查图标是否可见或处于溢出区域？

Answer 1

我找不到那样的东西所以我写了一个快速的库函数。

Element.addMethods({
    isClipped: function(element, recursive){
        element = $(element);
        var parent = element.up();
        if ((element === document.body) || !parent) return true;
        var eLeft = element.offsetLeft,
            eRight = eLeft+element.getWidth(),
            eTop = element.offsetTop,
            eBottom = eTop+element.getHeight();
        var pWidth = $R(parent.scrollLeft, parent.getWidth()+parent.scrollLeft),
            pHeight = $R(parent.scrollTop, parent.getHeight()+parent.scrollTop);
        if (!pWidth.include(eLeft) || !pWidth.include(eRight) || !pHeight.include(eTop) || !pHeight.include(eBottom)) {
            return true;
        }

        if (recursive) return parent.isClipped(true);
        return false;
    }
});

它不优雅（我说“快”）但它允许你在任何元素上使用isClipped()。你可以看到一个jsfiddle测试here。它测试元素的任何部分（边框除外）是否是溢出的一部分。您可以执行类似的操作来测试完全在包含客户区域之外的元素。

Answer 2

http://elvingrodriguez.com/overflowed/

这是一个jQuery插件，可以告诉您元素是否溢出。

Answer 3

如果节点的scrollWidth / Height高于其offsetWidth / Height，则会（部分）隐藏某些内容。然后是通过简单的数学确定隐藏哪个区域（添加图标宽度，计算滚动偏移，然后最终检查图标是否在该可见区域内）的问题。

如何检查元素是否在溢出区域？

3 个答案: