How can I get the scrollbar position with JavaScript?

Question

I'm trying to detect the position of the browser's scrollbar with JavaScript to decide where in the page the current view is.

My guess is that I have to detect where the thumb on the track is, and then the height of the thumb as a percentage of the total height of the track. Am I over-complicating it, or does JavaScript offer an easier solution than that? What would some code look like?

Answer 1

You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.

Answer 2

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

Answer 3

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 4

It's like this :)

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

Answer 5

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.

Answer 6

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

document.body.getBoundingClientRect().top

Answer 7

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}

Answer 8

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
});

Answer 9

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

Answer 10

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.

Answer 11

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>