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

Answer 1

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