I am trying to create my own scroll bars. I have tried most of the jquery scrollbar plugins and none of them seem to work for me, so I decided to create my own. I have an overflow area with scrollable content. I can get the scrollbar to work if I am able to figure out the height of the scrollable content area. I have tried .scrollHeight() and the browser doesn't even recognize it. The overflow area has a fixed position.
You can use 2 properties, clientHeight and offsetHeight to get the height of the div. clientHeight includes padding of the div. offsetHeight includes padding, scrollBar, and borders of the div.
jQuery height() Method The height() method sets or returns the height of the selected elements. When this method is used to return height, it returns the height of the FIRST matched element.
The height( value ) method sets the CSS height of every matched element.
Basically, $(window). height() give you the maximum height inside of the browser window (viewport), and $(document). height() gives you the height of the document inside of the browser. Most of the time, they will be exactly the same, even with scrollbars.
scrollHeight
is a property of a DOM object, not a function:
Height of the scroll view of an element; it includes the element padding but not its margin.
Given this:
<div id="x" style="height: 100px; overflow: hidden;"> <div style="height: 200px;"> pancakes </div> </div>
This yields 200:
$('#x')[0].scrollHeight
For example: http://jsfiddle.net/ambiguous/u69kQ/2/ (run with the JavaScript console open).
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