A Portfolio and blog for Mustafa Kurtuldu

What I was trying to figure out is how can you check if a table (or a div) that has a parent div with CSS overflow:auto applied to it and has started to horizontally scroll with JavaScript/jQuery.

Seems that the scroll() API in jQuery only checks if the event has been triggered and not if it has a visible scroll.

Then I found element.scrollWidth. All I had to do is check if the scroll width is greater than the container width1 and BOOM. Pretty simple when you think about it 🙂


        <th> Lorem ipsum  </th>
        <th> adhuc maiestatis </th>
        <td> dolor sit amet, meis solum eam ea, e  </td>
        <td> has ea, alii ipsum necessitatibus ex qui.   </td>


table { border : 1px solid red; white-space: nowrap; width: 100%;}
div { border: 1px dashed blue; padding: 10px; overflow: auto; }


window.onresize = function() { 
         if ( $("div").outerWidth() < $("div").get(0).scrollWidth ) {
             console.log("foo bar scrollbar");
         } else {
             console.log(" no scrolling 🙂  ");

Bare in mind that you will need to use a browser that supports log commands to get the scroll message. IE9 and above supports it in the dev tools as does Firebug & Chrome.