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

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 。它测试元素的任何部分(不包括边框)是否是溢出的一部分。您可以执行类似的操作来测试完全位于包含客户区域之外的元素。