Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to get the position of scrollbar using JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 18 Mar, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Program:




    <!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>
  • 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:




    <!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>
  • Output:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!