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

Test if the scroll bar is at the bottom

P: n/a
How can I test if a vertical scroll bar is at the bottom of the range?
I know that...

document.getElementById('mydiv').scrollHeight

....returns the range, and...

document.getElementById('mydiv').scrollTop

....returns the position of the top of the scroll handle in the range,
but that's not enough information because the scroll handle adds an
arbitrary amount of height. Is there a way to test for the height of
the scroll handle, or is there just a better way to test if the scroll
bar is at the bottom of the range?

Thanks.
Aug 7 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Aug 7, 12:12*am, bgold12 <bgol...@gmail.comwrote:
How can I test if a vertical scroll bar is at the bottom of the range?
I know that...

document.getElementById('mydiv').scrollHeight

...returns the range, and...

document.getElementById('mydiv').scrollTop

...returns the position of the top of the scroll handle in the range,
but that's not enough information because the scroll handle adds an
arbitrary amount of height. Is there a way to test for the height of
You need the clientHeight property to complete the equation, but it
has nothing to do with the scrollbar dimensions.
Aug 7 '08 #2

P: n/a
On Aug 7, 12:12*am, bgold12 <bgol...@gmail.comwrote:
How can I test if a vertical scroll bar is at the bottom of the range?
I know that...

document.getElementById('mydiv').scrollHeight

...returns the range, and...

document.getElementById('mydiv').scrollTop

...returns the position of the top of the scroll handle in the range,
but that's not enough information because the scroll handle adds an
arbitrary amount of height. Is there a way to test for the height of
the scroll handle, or is there just a better way to test if the scroll
bar is at the bottom of the range?

Thanks.
var myDiv = document.getElementById("myElement"); //get the html
element
height = myDiv.scrollHeight; //total height of
div element
position = myDiv.scrollTop; //where the
scrollbar is positioned if overflowing...
scrollbar = myDiv.clientHeight; //the actual
height of scrollbar widget (the blue thingamajiggy)

//to check if the scrollbar is docked at the bottom
//do something like this...
if((height - position) == scrollbar){
alert('scrollbar is docked at the bottom');
}

-bseanvt
Aug 13 '08 #3

P: n/a
On Aug 13, 4:10*pm, bseanvt <bsea...@gmail.comwrote:
On Aug 7, 12:12*am, bgold12 <bgol...@gmail.comwrote:
How can I test if a vertical scroll bar is at the bottom of the range?
I know that...
document.getElementById('mydiv').scrollHeight
...returns the range, and...
document.getElementById('mydiv').scrollTop
...returns the position of the top of the scroll handle in the range,
but that's not enough information because the scroll handle adds an
arbitrary amount of height. Is there a way to test for the height of
the scroll handle, or is there just a better way to test if the scroll
bar is at the bottom of the range?
Thanks.

var myDiv * = document.getElementById("myElement"); *//get the html
element
height * * *= myDiv.scrollHeight; * * * * * * * ** *//total height of
div element
position * *= myDiv.scrollTop; * * * * * * * * * * * //where the
scrollbar is positioned if overflowing...
scrollbar * = myDiv.clientHeight; * * * * * * * * **//the actual
height of scrollbar widget (the blue thingamajiggy)

//to check if the scrollbar is docked at the bottom
//do something like this...
if((height - position) == scrollbar){
* alert('scrollbar is docked at the bottom');

}

-bseanvt
oops... made a mistake... need to add those vars together. here is the
code:

var container = document.getElementById("my_container");
height = container.clientHeight;
scroll = container.scrollHeight;
positon = container.scrollTop;

if((height + position) == scroll){
/* do something here like reposition scrollbar */
container.scrollTop = 123;
}
Aug 14 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.