How to Get the Scrollbar Position with JavaScript

How can I get the scrollbar position with JavaScript?

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.

How to get and set the current web page scroll position?

You're looking for the document.documentElement.scrollTop property.

Get scroll position in Javascript

The solution for JavaScript is:

var scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;

Or if you use jQuery (this is more reliable, due cross-browser support):

var scrollPos = $(window).scrollTop();

Scrollbar position

For scrolling to top, use :

$('.scrollbox').scrollTop(0);

Updated Fiddle

$('.addrow').on('click', function() {
    $('.scrollbox').append(newline);
    $('.scrollbox').scrollTop(0);
});

Get scroll position with Reactjs

This should work:

this.setState({
    post: post,
    theposition: window.pageYOffset
});

JavaScript get window X/Y position for scroll

The method jQuery (v1.10) uses to find this is:

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

That is:

• It tests for window.pageXOffset first and uses that if it exists.
• Otherwise, it uses document.documentElement.scrollLeft.
• It then subtracts document.documentElement.clientLeft if it exists.

The subtraction of document.documentElement.clientLeft / Top only appears to be required to correct for situations where you have applied a border (not padding or margin, but actual border) to the root element, and at that, possibly only in certain browsers.

How to get the current scroll position in javascript?

You can save your position on top button click, then check it on bottom click:

Vue.component('scrollToTopButton', {
  template: `
    <div v-scroll="onScroll" v-if="hasVerticalScroll">
      <v-btn v-if="!isVisible" fab fixed bottom right color="primary" @click="toBottom">
        <v-icon>mdi-arrow-down-bold-box-outline</v-icon>
      </v-btn>
      <v-btn v-else fab fixed bottom right color="primary" @click="toTop">
        <v-icon>mdi-arrow-up-bold-box-outline</v-icon>
      </v-btn>
    </div>
  `,
  data () {
    return {
      isVisible: false,
      position: 0
    }
  },
   methods: {
    onScroll() {
      this.isVisible = window.scrollY > 50
    },
    toTop() {
      this.position = window.scrollY
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    },
    toBottom(){
      let pos = this.position > 0 ? this.position : document.body.scrollHeight
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      })
    },
  },
  computed: {
    hasVerticalScroll(){
      return document.body.offsetHeight > window.innerHeight;
    }
  }
})
new Vue({
  el: "#demo",
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo" >
  <v-app>
    <v-main>
      <v-container>
        <div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>a</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div>
        <scroll-to-top-button />
      </v-container>
    </v-main>
  </v-app>
</div>

How to move a scrollbar together with the left position of its div (possibly with React)

After pursuing this quest for another couple of days, I haven't been able to find examples of React hooks that are able to detect/manage the scroll of individual components in page, let alone horizontal scroll.

I have solved my problem by leaving CSS aside and putting in place a JS/DOM-based solution, catering to the Element methods that control scroll.

These React solutions are all based on using a useRef hook tied to the page Element that is to be controlled, and accessing its methods through the current property of the reference.

The main drawback of these solutions is that (regardless of what the standards seem to promise) I cannot exploit CSS easing functions to implement a smooth scroll transition: for that I was forced to use a setInterval/setTimeout solution to perform many partial scrolls of my component.

---

Related Topics