jQuery scrollHeight - Javascript

jQuery scrollHeight is a property that returns the total height of an element's content, including its padding, but not including its border and margin. This property is only applicable to elements that have overflowing content such as

Syntax

The jQuery scrollHeight property syntax is as follows:

$(selector).prop("scrollHeight");

Parameters

The jQuery scrollHeight property does not require any parameters.

Return Value

The jQuery scrollHeight property returns the height of an element's content as an integer value.

Examples

Example 1: Get the scroll height of a

element

<div id="myDiv" style="height:100px; border:1px solid black; overflow:auto;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a finibus nunc. Nam id tincidunt urna. Proin ligula nibh, tristique vel velit sed, faucibus accumsan magna. Curabitur nec vestibulum magna. Nunc ac venenatis nisi, in venenatis ante.
</div>

var myDivScrollHeight = $("#myDiv").prop("scrollHeight");
console.log("The scroll height of myDiv is: " + myDivScrollHeight);

Example 2: Auto-scroll to the bottom of a element on page load

<textarea id="myTextarea" style="height:100px; border:1px solid black; overflow:auto;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a finibus nunc. Nam id tincidunt urna. Proin ligula nibh, tristique vel velit sed, faucibus accumsan magna. Curabitur nec vestibulum magna. Nunc ac venenatis nisi, in venenatis ante.
</textarea>

$(document).ready(function(){
   $("#myTextarea").scrollTop($("#myTextarea").prop("scrollHeight"));
});

Conclusion

jQuery scrollHeight is a useful property for getting the height of an element's content, which can be used for various purposes such as setting the height of an element dynamically or scrolling to a specific location within an element.