detect if scrollbars are visible inside a div

[andrew.neale]

Hello,

I have a div that has an overflow set to auto. I would like to know if
the scrollbars are visible in javascript.

Any help is appreciated.

Thanks

[andrew.neale]

I think I have sorted the problem

if (document.getEl ementById('divI D').scrollHeigh t >
document.getEle mentById('divID ').clientHeight )
{
//a scroll bar is present
}
else
{
//a scroll bar is NOT present
}

can anyone see any problems with this?

[Csaba Gabor]

an**********@to talise.co.uk wrote:

I think I have sorted the problem

if (document.getEl ementById('divI D').scrollHeigh t >
document.getEle mentById('divID ').clientHeight ) .... can anyone see any problems with this?

The below code fails to detect a horizontal scroll bar on Firefox

<div id=div1 style="border:1 px solid
red;width:120px ;height:50px;ov erflow:auto">
There_once_was_ a_boy_from_nod_ Who_carried_a_l ot_of_sod</div><br>

<div id=div2 style="border:1 px solid
red;width:120px ;height:50px;ov erflow:auto">
There once was a boy from nod Who carried a lot of sod</div>

<script type='text/javascript'>
function scrollDetect(el emId) {
var elem = document.getEle mentById(elemId );
if (elem.scrollHei ght > elem.clientHeig ht) {
alert("code says scroll bar is present on '" +
elemId + "'\n" + elem.scrollHeig ht +
", " + elem.clientHeig ht);
} else {
alert("No scroll bar detected for '" +
elemId + "'\n" + elem.scrollHeig ht +
", " + elem.clientHeig ht);
}
}
scrollDetect('d iv1');
scrollDetect('d iv2');
</script>

Csaba Gabor from Vienna

[Gérard Talbot]

an**********@to talise.co.uk wrote :

I think I have sorted the problem

if (document.getEl ementById('divI D').scrollHeigh t >
document.getEle mentById('divID ').clientHeight )
{
//a scroll bar is present
Correction: a vertical scrollbar is rendered.
}
else
{
//a scroll bar is NOT present
Correction: a vertical scrollbar is not rendered.
}

can anyone see any problems with this?

You need to do the same for clientWidth and scrollWidth to detect the
presence of an horizontal scrollbar.
Finally, your code should get to know what is the current/computed css
overflow value because the client vs scroll comparison is equal for
overflow: scroll when there is nothing to scroll actually. So, the
scrollbar is present and rendered but your code fails to detect this for
both scrollbars.

Gérard
--
remove blah to email me