How to get the position of scrollbar using JavaScript ?

JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below:

Method 1: Whenever the function getScroll() is encountered, it sets the current value of the scrollbar to the span element whose id is position. The scrollbar position along a horizontal and vertical axis is denoted by integers. The pageXOffset property returns the number of pixels scrolled along the horizontal axis (i.e. left and right) and the pageYOffset property returns the number of pixels scrolled along the vertical axis (i.e. top and bottom). The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties and are the read-only properties.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Scrollbar position using JavaScript/jQuery?
        </title>
        <style>
            .scroll-area {
                height: 1000px;
                background-color: #eee;
                padding: 10%;
            }
              
            button {
                margin-top: 200px;
                margin-bottom: 100px;
                display: block;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green"
           GeeksforGeeks 
        </h1>
        <div>
            <p>Current position is:
              <b><span id="position"></span></b>
            </p>
        </div>
        <p>
          Click on the buttons below to get the current
          position of the scrollbar.
        </p>
      
        <p class="scroll-area">
          GeeksforGeeks is a computer science portal. 
          This is a large scrollable area.
      
            <button onclick="getScroll()"
              Click to get current scrollbar position
            </button>
            <button onclick="getScroll()"
              Click to get current scrollbar position 
            </button>
            <button onclick="getScroll()"
              Click to get current scrollbar position 
            </button>
        </p>
        
        <script>
            getScroll = () => {
                var position = document.getElementById('position');
                position.innerHTML = ""
                if (window.pageYOffset != undefined) {
                    position.innerHTML = " X-axis : " 
                    + pageXOffset + " Y-axis : " + pageYOffset;
                } else {
                    var x_axis, y_axis, doc = document,
                        ele = doc.documentElement,
                        b = doc.body;
                    x_axis = ele.scrollLeft || b.scrollLeft || 0;
                    y_axis = ele.scrollTop || b.scrollTop || 0;
                    position.innerHTML = " X-axis : "
                    + x_axis + " Y-axis : " + y_axis;
                }
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Method 2: Scrollbar position using event listener. The Window interface represents a window containing a DOM document and we can get the scrollbar position by adding an event-listener on it. This function will automatically be triggered whenever the scroll event triggers. The scrollX and scrollY return the floating values. Whenever the scroll event occurs the event listener will automatically trigger and updates the value of the scrollbar position in the element whose id is the position.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Scrollbar position using JavaScript/jQuery?
        </title>
        <style>
            .scroll-area {
                height: 1000px;
                background-color: #eee;
                padding: 10%;
            }
              
            #sticky {
                position: sticky;
                top: 0;
                background: #008000;
                color: white;
                padding: 1px;
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks 
        </h1>
      
        <div id="sticky">
            <p>Current position is:
              <b><span id="position"></span></b>
            </p>
        </div>
        <p>
          Click on the buttons below to get the 
          current position of the scrollbar.
        </p>
      
        <p class="scroll-area">
          GeeksforGeeks is a computer science portal.
          This is a large scrollable area.
        </p>
        <script>
            var position = document.getElementById('position');
            position.innerHTML = ""
      
            window.addEventListener("scroll", function(event) {
      
                var scroll_y = this.scrollY;
                var scroll_x = this.scrollX;
                console.log(scroll_x, scroll_y);
                position.innerHTML = " X-axis : " 
                + scroll_x + "Y-axis : " + scroll_y
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.