Open In App

How to get the position of scrollbar using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: 

Approach 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.

Example: In this example, we are using the above-explained approach.

html




<style>
    .scroll-area {
        height: 1000px;
        background-color: #eee;
        padding: 10%;
    }
 
    button {
        margin-top: 200px;
        margin-bottom: 100px;
        display: block;
    }
</style>
 
<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 = () => {
        let position = document.getElementById('position');
        position.innerHTML = ""
        if (window.pageYOffset != undefined) {
            position.innerHTML = " X-axis : "
                + pageXOffset + " Y-axis : " + pageYOffset;
        } else {
            let 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>


Output:

How to get the position of scrollbar using JavaScript ?

Approach 2: Scrollbar position using an 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.

Example: This example is demonstrated above approach.

html




<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>
 
<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>
    let position = document.getElementById('position');
    position.innerHTML = ""
 
    window.addEventListener("scroll", function (event) {
 
        let scroll_y = this.scrollY;
        let scroll_x = this.scrollX;
        console.log(scroll_x, scroll_y);
        position.innerHTML = " X-axis : "
            + scroll_x + "Y-axis : " + scroll_y
    });
</script>


Output:

How to get the position of scrollbar using JavaScript ?



Last Updated : 26 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads