By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,827 Members | 2,195 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,827 IT Pros & Developers. It's quick & easy.

detect if scrollbars are visible inside a div

P: n/a
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

Aug 11 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
I think I have sorted the problem

if (document.getElementById('divID').scrollHeight >
document.getElementById('divID').clientHeight)
{
//a scroll bar is present
}
else
{
//a scroll bar is NOT present
}

can anyone see any problems with this?

Aug 11 '05 #2

P: n/a
an**********@totalise.co.uk wrote:
I think I have sorted the problem

if (document.getElementById('divID').scrollHeight >
document.getElementById('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:1px solid
red;width:120px;height:50px;overflow:auto">
There_once_was_a_boy_from_nod_Who_carried_a_lot_of _sod</div><br>

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

<script type='text/javascript'>
function scrollDetect(elemId) {
var elem = document.getElementById(elemId);
if (elem.scrollHeight > elem.clientHeight) {
alert("code says scroll bar is present on '" +
elemId + "'\n" + elem.scrollHeight +
", " + elem.clientHeight);
} else {
alert("No scroll bar detected for '" +
elemId + "'\n" + elem.scrollHeight +
", " + elem.clientHeight);
}
}
scrollDetect('div1');
scrollDetect('div2');
</script>

Csaba Gabor from Vienna

Aug 11 '05 #3

P: n/a
an**********@totalise.co.uk wrote :
I think I have sorted the problem

if (document.getElementById('divID').scrollHeight >
document.getElementById('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
Aug 17 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.