How can I get the scrollbar position with JavaScript?

I did this for a <div> on Chrome.

element.scrollTop - is the pixels hidden in top due to the scroll. With no scroll its value is 0.

element.scrollHeight - is the pixels of the whole div.

element.clientHeight - is the pixels that you see in your browser.

var a = element.scrollTop;

will be the position.

var b = element.scrollHeight - element.clientHeight;

will be the maximum value for scrollTop.

var c = a / b;

will be the percent of scroll [from 0 to 1].

It's like this :)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

returns an array with two integers- [scrollLeft, scrollTop]

Answer for 2018:

The best way to do things like that is to use the Intersection Observer API.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. Unfortunately, as the web has matured, the need for this kind of information has grown. Intersection information is needed for many reasons, such as:

• Lazy-loading of images or other content as a page is scrolled.
• Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
• Reporting of visibility of advertisements in order to calculate ad revenues.
• Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

See the following code example:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

Most modern browsers support the IntersectionObserver, but you should use the polyfill for backward-compatibility.

If you care for the whole page, you can use this:

document.body.getBoundingClientRect().top

Snippets

The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically.

window.addEventListener('scroll', function(){console.log(this.scrollY)})

html{height:5000px}

Shorter version using anonymous arrow function (ES6) and avoiding the use of this

window.addEventListener('scroll', () => console.log(scrollY))

html{height:5000px}

Here is the other way to get the scroll position:

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

If you are using jQuery there is a perfect function for you: .scrollTop()

doc here -> http://api.jquery.com/scrollTop/

note: you can use this function to retrieve OR set the position.

see also: http://api.jquery.com/?s=scroll

I think the following function can help to have scroll coordinate values:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

I got this idea from this answer with a little change.

Not sure why everyone has posted such convoluted answers. To get the current scroll position of the page you can use

window.scrollY;

If you want the scroll as a percentage of total page then you can do the math using the height of the body.

document.body.scrollHeight;

If you want to check if a particular element is in view. It is recommended to use the Intersection observer API.

I think this may be the easier way To get the current scroll position of a page or any scrollable element. The scrollHeight will return the scroll height, but I think that the scrollY will return the current scrollbar position. Using javascript to get the scrollbar position

let currentScrollPosition = window.scrollY;
console.log(currentScrollPosition);

when you scroll you get the div postion

when you click on the div, the scroll bar scroll 500 in the y axis

function getTagPosition(event) {
        
  let x = document.getElementById("hi").offsetLeft

  let y = document.getElementById("hi").offsetTop

  console.log("x", x, "y", y);
         
}

function scrollToPosition(position) {

  console.log("was here")

  document.getElementById("hi").scrollTo(0, position);
  
}

 <div id="hi" onscroll="getTagPosition()" onclick="scrollToPosition(500)" style="width: 100px; height: 100px; overflow-y: scroll;">
        
        div dsgdfgf
        div dsgdfgf
         div dsgdfgf



         div dsgdfgf

          div dsgdfgf
          div dsgdfgf
          div dsgdfgf
          div dsgdfgf
          div dsgdfgf

           div dsgdfgf
           div dsgdfgf
           div dsgdfgf

            div dsgdfgf
            div dsgdfgf

            div dsgdfgf



             div dsgdfgf
              div dsgdfgf
              div dsgdfgf
              div dsgdfgf

               div dsgdfgf
    
    </div>