In this post we will look at a way of detecting end of scrolling in an HTML element. This is done my apps to insert more content to the page using AJAX when user have finished reading the present content. Its widely used in Phonegap apps.
View Demo
Before we get into the implementation you need to learn some Javascript variables and functions.
Element.scrollHeight and Element.offsetHeight
Element.scrollHeight is a HTML element property which is set to the total height of the element. It includes visible and non-visible region (due to overflow hidden or scroll) of the element. Element.scrollHeight doesn’t include the border. Similarly check Element.scrollWidth
Element.offsetHeight is visible region height of the element. It includes the border and padding also. Similarly check out Element.offsetWidth
Element.clientHeight and Element.clientWidth
Element.clientHeight is same as Element.offsetHeight but doesn’t include border. Similarly Element.clientWidth is like Element.offsetWidth.
Element.scrollTop and window.pageYOffset (window.scrollY)
Element.scrollTop property is set only if the element generates vertical scrollbar. Otherwise its set to 0. This properties is set to the number of pixels the content of an element is scrolled upward. It includes border and padding also. Element.scrollTop is read/write. Similarly check Element.scrollLeft
Element.scrollTop is undefined for window object (HTML tag). window.pageYOffset is same as Element.scrollTop for window object. Similarly check window.pageXOffset
HTMLElement.offsetParent
HTMLElement.offsetParent is set to the HTML object which is closet positioned containing element(closest parent element whose position property is set relative, absolute or fixed). If none of its parents have their position property set than offsetParent is set to body element. More on HTMLElement.offsetParent
For finding top and left distance of an element with respect to its offsetParent use HTMLElement.offsetTop and HTMLElement.offsetLeft
HTMLElement.onscroll Event
When an HTML element is scrolled this event is triggered. For more info chick here
window.scrollBy()
This function is used to scroll window using Javascript for a specified number of pixels. For more info click here. Also check window.scrollByLines(), Window.scrollTo() and window.scroll()
Use window.scrollBy() if you want to scroll more than once. Otherwise use window.scrollTo() or window.scroll().
Logic for implementing detection of scrolling end
Code Implementation
<html>
<head>
<title>Detect End Of Scrolling</title>
<script type="text/javascript">
function scrolled(o)
{
//visible height + pixel scrolled = total height
if(o.offsetHeight + o.scrollTop == o.scrollHeight)
{
alert("End");
}
}
</script>
<style type="text/css">
.parentDiv
{
background-color: pink;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.innerDiv
{
background-color: yellow;
height: 400px;
width: 50%;
}
</style>
</head>
<body>
<div onscroll="scrolled(this)" class="parentDiv">
<div class="innerDiv"></div>
</div>
</body>
</html>
