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

Posted 2023-05-07

【中文标题】jQuery / JS 获取文本区域的滚动条高度

【英文标题】：jQuery / JS get the scrollbar height of an textarea

【发布时间】：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 有一个滚动条！ （没有那么高，但文本区域中有很多文字）

【参考方案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);