QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Detecting End Of Scrolling In HTML Element

Detecting End Of Scrolling In HTML Element

scroll-end

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

Untitled

Code Implementation

<!doctype html>
<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>

Apr 20, 2014Narayan Prusty
Creating A Viewport ResizerPull To Refresh For Phonegap App
Comments: 2
  1. Topup Philippines
    4 years ago

    Thank you for sharing this. I’ll be using this on my site with vuejs. Never thought it was this easy.

    ReplyCancel
  2. Steve
    7 years ago

    Nice job, mate. Your ridiculous “no adblock” page blocker absolutely guarantees that I will never give this place another pageview. Instead of blocking the entire site, a more discreet banner explaining your position regarding ads would be much more effective, and would result in a higher likelihood of being whitelisted.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 3 Comments Web Developmentpage end, scrolling
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Element.scrollHeight and Element.offsetHeight
  • Element.clientHeight and Element.clientWidth
  • Element.scrollTop and window.pageYOffset (window.scrollY)
  • HTMLElement.offsetParent
  • HTMLElement.onscroll Event
  • window.scrollBy()
  • Logic for implementing detection of scrolling end
  • Code Implementation
Related Articles
  • Facebook Style Infinite Scroll
  • Detecting If Browser Is Online Or Offline Using JavaScript
  • Lazy Loading Images And Its SEO Impact
  • JavaScript Scroll by Dragging
  • Horizontal and vertical Centering Using CSS
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license