How to Determine When a Scrollbar Has Reached the Bottom Using JavaScript

Save

You don't normally see anything as big as a ticker-tape parade when your scroll bar reaches the bottom of a document on a Web page, but it is possible for JavaScript developers to tell when you scroll there, and you may have witnessed this in action when asked to scroll to the bottom of a "Terms of Service" agreement before you could continue. HTML elements expose several scroll properties your Web application can use to detect when a scrollbar reaches the bottom of an element.

  • Launch an HTML editor and open an HTML document.

  • Add a textarea control to the body section of one of your HTML documents as shown below:

    <textarea id="textarea1" rows="4" cols="55">
    test data test data test data test data test data
    test data test data test data test data test data
    test data test data test data test data test data
    test data test data test data test data test data
    test data test data test data test data test data
    test data test data test data test data test data
    test data test data test data test data test data
    </textarea>

    <input type="button" value="Check Scroll Position" onclick="return bottomReached('textarea1')" />

    This textarea contains enough sample data to cause a scrollbar to appear on the Web page. The button calls a JavaScript function that determines if you've reached the bottom of the page. The button passes the textarea's id value to the function.

  • Add this JavaScript function to your document's head section:

    <script>
    function bottomReached(objectID) {

    var object = document.getElementById(objectID);
    var bottomReached = false;
    var actualLocation = object.scrollTop + object.offsetHeight;
    var scrollHeight = object.scrollHeight;

    if (actualLocation > scrollHeight)
    bottomReached = true;

    alert("Bottom reached = " + bottomReached);
    }
    </script>

    This function retrieves a reference to your textarea object. The function then gets the scrollbar’s actual location by adding its scrollTop value to its offsetHeight value. If the actual location is greater than the textarea’s scrollHeight value, the variable bottomReached variable becomes true. Otherwise, the function sets it to false.

  • Save the document and view it in your browser. The textarea containing text appears. Click the "Check Scroll Position" button. The function runs and a message box displays "Bottom reached = false." Scroll to the bottom of the textarea and click the button again. The message reads "Bottom reached = true."

Tips & Warnings

  • To use the bottomReached function, pass it the id of the textarea you wish to monitor. The function will not work without this id. Check the value of the bottomReached variable to determine if a user’s scrollbar has reached the bottom.

References

  • Photo Credit Thinkstock Images/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!