How can I check if an element is in overflow area?

i have a div with a with of 300px. this DIV contains different Icons an开发者_如何学Cd if there are too many Icons then they are not visible due to overflow:hidden How may i programatically check if an icon is visible or is in overflow area?

I couldn't find anything exactly like that so I wrote a quick library function.

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

It's not elegant (I did say "quick") but it allows you to use isClipped() on any element. You can see a jsfiddle test here. It tests if any part of an element (excluding borders) is part of the overflow. You could do something similar to test for elements that are entirely outside the containing client area.

http://elvingrodriguez.com/overflowed/

It's a jQuery plugin that tells you if an element is overflowed.

If a node's scrollWidth/Height is higher than it's offsetWidth/Height, then something will be (partially) hidden. It's then a matter of determining which area is hidden through simple math (adding up icon widths, calculating the scroll offset and then eventually checking if an icon is within that visible area).