Detectinghorizontalscrollinganddivswithoverflow:auto

May7th2012Code

WhatIwastryingtofigureoutishowcanyoucheckifatable(oradiv)thathasaparentdivwithCSS
overflow:autoappliedtoitandhasstartedtohorizontallyscrollwithJavaScript/jQuery.
Seemsthatthescroll()APIinjQueryonlychecksiftheeventhasbeentriggeredandnotifithasavisible
scroll.

ThenIfoundelement.scrollWidth.AllIhadtodoischeckifthescrollwidthisgreaterthanthecontainer
width1andBOOM.Prettysimplewhenyouthinkaboutit
HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<div>
<table>
<thead>
<tr>
<th>Loremipsum</th>
<th>adhucmaiestatis</th>
</tr>
</thead>
<tr>
<td>dolorsitamet,meissolumeamea,e</td>
<td>hasea,aliiipsumnecessitatibusexqui.</td>
</tr>
</table>
</div>

CSS
1.
2.

table{border:1pxsolidred;whitespace:nowrap;width:100%;}
div{border:1pxdashedblue;padding:10px;overflow:auto;}

JavaScript
1.
2.
3.
4.

window.onresize=function(){
if($("div").outerWidth()<$("div").get(0).scrollWidth){
console.log("foobarscrollbar");
}else{

5.
6.
7.

console.log("noscrolling
}
};

");