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
What's the Significant Use of Unary Plus and Minus Operators
Underscore Template Throwing Variable Not Defined Error
Are There Performance Concerns with 'Return Await'
How to Fire and Forget a Promise in Nodejs (Es7)
What's Wrong with Awaiting a Promise Chain
Constructor Function VS Factory Functions
Pass Props to Parent Component in React.Js
How to Redirect with JavaScript
Why Avoid Increment ("++") and Decrement ("--") Operators in JavaScript
Prevent Execution of Parent Event Handler
Is JavaScript Supported in an Email Message
What Techniques Can Be Used to Define a Class in JavaScript, and What Are Their Trade-Offs
Sort Array by Firstname (Alphabetically) in JavaScript
How to Fix Error: Listen Eaddrinuse While Using Nodejs