Menu
How can I get the browser scrollbar height? Does JS have a built-in function for this case? Somebody please help me out of this.
420
The scroll height refers to the entire height of that element in the HTML page, even if it is not viewable due to overflow property. The element's scroll height includes the height assigned in CSS property plus the padding, but it does not include the margin, border, or scrollbar.
We can calculate it by CSS height + CSS padding. If a horizontal scrollbar is present, the inner height includes the height of the scrollbar. scrollHeight (visible + hidden content) is the height of an element's visible content, including hidden content not visible on the screen for an overflowing element.
One need to use scrollHeight property to get height of the scroll view of an element. If you are using jQuery 1.7 or higher version then use prop(), otherwise use attr(). In the code sample, I have used "prop()" to get value of "scrollHeight" property. $(document).
In summary, scrollTop is how much it's currently scrolled, and scrollHeight is the total height, including content scrolled out of view.
There isn't a built-in method for this. However, the scrollbar's height is supposed to give an indication of how much of the available content fits within the available viewport. Going by that, we can determine it like:
var sbHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight);
Where window.innerHeight / document.body.offsetHeight is the percentage of content visible currently. We multiple that with the available viewport height to get the approximate scrollbar height.
Note: Different browsers may add/reduce some pixels to/from the scrolbar height.
148
'window.pageYOffset'
returns the current height of the scrollbar concerning the full height of the document. A simple example of usage is like
alert('Current scroll from the top: ' + window.pageYOffset)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
