jQuery / JS 获取文本区域的滚动条高度答案

【问题标题】：jQuery / JS get the scrollbar height of an textareajQuery / JS 获取文本区域的滚动条高度
【发布时间】：2011-08-24 05:19:33
【问题描述】：

我有一个固定高度的文本区域。当用户在 textarea 中输入文本时，滚动条会在用户输入一些文本后出现。

如何使用 jQuery 或纯 JavaScript 获取滚动条高度？我一直在寻找这个几个小时，但找不到任何东西。我不能只插入一个 div 并通过 div 偏移量获取滚动条高度，因为 textarea 不允许有子元素。

请不要给我一个可以完成这项工作的 jQuery 插件的链接。我想学点东西。

【问题讨论】：

什么浏览器？ FF 4.0，FF 3.6，IE。 TextAreas 在每个浏览器中的呈现略有不同。
Chrome 10 和 FF4。我已经确定 textarea 有一个滚动条！（没有那么高，但文本区域中有很多文字）

标签： javascript jquery textarea scrollbar

【解决方案1】：

textarea.scrollHeight

返回一个整数（像素）

【讨论】：

alert($('textarea:first').scrollHeight); 返回未定义。选择器工作正常（我用 .css 尝试过）并且包含 jQuery。
scrollHeight 是 DOM 元素的一个属性。 jQuery 对象不存在它。使用.attr('scrollHeight') 或$('textarea:first').get(0).scrollHeight
如果使用 jQuery 1.6 或更高版本，请使用 $('textarea:first').prop('scrollHeight) 而不是 .attr('scrollHeight)。 “从 jQuery 1.6 开始，the .prop() method 提供了一种显式检索属性值的方法，而 .attr() 检索属性……在 jQuery 1.6 之前，可以使用 .attr() 方法检索这些属性，但这不在范围内属性。”

【解决方案2】：

$.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);
    }
});

【讨论】：

【解决方案3】：

请注意，在比较 scrollHeight 时，应排除 textarea 的 upper padding 和 lower padding。

示例

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);
}

【讨论】：