473,387 Members | 1,517 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Test if the scroll bar is at the bottom

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
3 6434
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: AES/newspost | last post by:
Just been involved with a web site where clicking a button on the main page opened a second (or secondary) window intended to function like a dialog box in Apple GUI jargon. (The primary page was...
4
by: Mad Scientist Jr | last post by:
I have a textbox that i am adding to (in codebehind of ASP.NET) and need to ensure that the focus is scrolled to the bottom of the textbox each time the page refreshes, and then set focus to a 2nd...
14
by: Simon Wigzell | last post by:
I want to display HTML text inside a div and have the page open scrolled to the bottom. (My div has overflow:auto so that it appears with scroll bars) I have found this that works on a textarea:...
1
by: Lasse Edsvik | last post by:
Hello I was wondering if you guys could tell me to scroll the richtextbox's content to bottom if there it has enough text to make a scroll that is. everytime i append text to it i would like...
7
by: Mel Weaver | last post by:
Hello, How do you scroll to the bottom of a multiline textbox in code? Mel
4
by: John Dann | last post by:
I have a listview control on a simple vb.net form that's populated programmatically. It is set to scrollable and a scroll bar duly appears. However the scroll bar doesn't allow the bottom rows of...
0
by: jasondavidcarr | last post by:
Hello all, I have a "comments" page that contains three sections; the article to be commented on is on top, followed by previous comments, and on the bottom a place to add new comments. It's a...
6
by: =?Utf-8?B?U2hhcm9u?= | last post by:
I'm using the VScrollBar and set it as follow: m_vScrollBar.Minimum = -19602; m_vScrollBar.Maximum = 0; m_vScrollBar.SmallChange = 1; m_vScrollBar.LargeChange = 1089; m_vScrollBar.Value =...
2
by: Paul Neave | last post by:
Hello all. Please try this link for me and let me know what you see: http://www.neave.com/temp/stretch_test.html You should see a green header filling the top of the page, a red footer at...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.