How can we find out scrollbar position has reached at the bottom in js
[Wednesday, September 17, 2008 | 0 comments ]

How can we find out scrollbar position has reached at the bottom in js

Hi,

My issue is, I need to find out the the scroll bar position,
ie whether the current scroll bar reached at the bottom of the scroll bar.
I hope you can gimme a brief idea regarding this.

Thanks in advance.

--
Thanking you, Warm regards,

jay jay

...................................................................................

ben wrote....

Hi,

It's not very hard. It's a simple matter of detecting the current scroll offset,
the height of the current window view & the height of the document.

The logic is as follows

if(horizontalScrollOffset + windowHeight == documentHeight) {
// we're at the bottom of the page
} else {
// we're not at the bottom of the page
}

Off the top of my head, the code would look something like
(I haven't tested this)

<script>
function hasScrolledToBottom()
{
if(scrollYOffset() + window.innerHeight >= document.body.offsetHeight) {
return true;
} else {
return false;
}
}

function scrollYOffset()
{
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset) {
ScrollTop = window.pageYOffset;

} else {
ScrollTop = (document.body.parentElement) ?

document.body.parentElement.scrollTop : 0;
}
}
return ScrollTop;
}
</script>

<body style="height: 4000px; ">
</body>

Ben Rowe

......................................................

Brian Schilt Wrote

You would need to compare the overall document height with the
scrollTop position + viewport height. You could make a utility
function that you could use in the scroll event that fires when the
page is scrolled. When it reaches bottom the function could return
true, signifying the user has scrolled all the way to the bottom.

I haven't tested the below code, but the theory is there for you to
start with.

$(window).scroll(function(){
if(isScrollBottom()){
//scroll is at the bottom
//do something...
}

});

function isScrollBottom() {
var documentHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollPosition);

}

Brian

Bookmark and Share

0 comments

Post a Comment

Please put your comments here. your questions, your suggestions, also what went wrong with me.