How to get 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  Any ideas code-wise

User · Answer

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

User · Answer

it s like this    window addEventListener  quot scroll quot    event    gt        let scroll   this scrollY      console log scroll

User · Answer

Here is the other way to get scroll position  const getScrollPosition    el   window    gt       x  el pageXOffset     undefined   el pageXOffset   el scrollLeft    y  el pageYOffset     undefined   el pageYOffset   el scrollTop

User · Answer

if you care for the whole page  you can use this    x000D   x000D  document body getBoundingClientRect   top x000D   x000D   x000D

User · Answer

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

User · Answer

I think the following function can help to have scroll coordinate values   const getScrollCoordinate    el   window    gt       x  el pageXOffset    el scrollLeft    y  el pageYOffset    el scrollTop        I got this idea from this answer with a little change

User · Answer

I did this for a  lt div gt  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

User · Answer

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

User · Answer

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

[javascript] How to get scrollbar position with Javascript?

Examples related to javascript

Examples related to browser

Examples related to scroll

Examples related to dom-events