jQuery / JS get the scrollbar height of an textarea

Question

I\'ve got a textarea with a fixed height. When the user types text into the textarea a scrollbar will show up after the user typed some text in it.

How can I get the

Answer 1

textarea.scrollHeight

returns an integer (pixels)

Answer 2

Please note that you should exclude the upper padding and the lower padding of the textarea while comparing the scrollHeight.

Example

var scrollHeight = $("#textarea_id")[0].scrollHeight;
var padding = 14; //upperpadding 7 and lower padding 7.

if($("#textarea_id")[0].height() < (scrollHeight - padding)) {
  $("#textarea_id")[0].height(scrollHeight - padding);
}

Answer 3

$.each($("textarea"), function () {
    var scrollHeight = parseInt(this.scrollHeight);
    if ($("this").val() != "" && isNaN(scrollHeight) == false && scrollHeight > 0 && scrollHeight > $(this).height()) {
        console.log($(this).attr("id"));
        $(this).height(scrollHeight);
    }
});