How to detect overflow HTML elements

Question

I have created a navigation bar with div(s) within it.

When i zoom-in, I hide the div's moving out of navigation bar through css [overflow:hidden].

My goal is to create a java-script variable which will tell me what all div's are out of navigation Bar( hidden because of overflow), as i need to add them into collapsible menu which appears when even a single div is out of navigation Bar.

Thanks in advance

Lain · Accepted Answer · 2015-06-12 13:39:00Z

3

Compare scrollWidth/scrollHeight with clientWidth/clientHeight of the element.

if (e.scrollWidth > e.clientWidth){/*overflow*/}

https://jsfiddle.net/pdrk50a6/

Edit: I do not know your root element, yet in the end it is going to be something like this.

document.body.onresize = function(){
    var tR = [];
    var tL = document.querySelectorAll('div');

    for(var i=0, j=tL.length; i<j; i++)
        if (tL[i].scrollWidth > tL[i].clientWidth) tR.push(tL[i])

    //Do whatever you need with the tR elements (overflown)
}

edited Jun 12, 2015 at 13:39

answered Jun 12, 2015 at 12:42

Lain

3,7361 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Pinturikkio Over a year ago

Ok, but can you say to me how can I detect when it changes, or the event generated when a zoom in happened?

Lain Over a year ago

What kind of zoom are we talking about (action & device | custom made)?

Lain Over a year ago

I am not aware of any specific cross browser event fired on that action. There are ways to detect it, yet that would be another question/topic.

Lain Over a year ago

@Pinturikkio document.body.onresize works on modern browsers (Chrome & IE9+), just to say if you are interested.

Lain Over a year ago

You are welcome. If you have no additional questions on this topic, feel free to accept the answer, so further fellowers will see that your case got solved.

|

Collectives™ on Stack Overflow

How to detect overflow HTML elements

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related