Javascript检测文本区域中的滚动条答案

【问题标题】：Javascript detect scrollbar in textareaJavascript检测文本区域中的滚动条
【发布时间】：2011-03-15 09:20:34
【问题描述】：

我想知道是否有人知道我将如何检测滚动条何时出现在 textarea 中。

我目前正在为我的 JavaScript 使用 mootools，但在让它检测滚动条时遇到问题。

【问题讨论】：

出于好奇，您为什么要检测它？
因为我想用它来检测何时在文本框中放置了 3 行文本并停止允许输入更多字符。

标签： javascript mootools textarea scrollbar

【解决方案1】：

function has_scrollbar(elem_id)
{
    const elem = document.getElementById(elem_id);
    if (elem.clientHeight < elem.scrollHeight)
        alert("The element has a vertical scrollbar!");
    else
        alert("The element doesn't have a vertical scrollbar.");
}

查看这个 jsFiddle http://jsfiddle.net/qKNXH/

【讨论】：

非常感谢！这很棒！
因为这是一个非常古老的问题，所以我编辑了这个答案以添加一个从@Castrohenge 的代码中分叉出来的小提琴。
如果你在 textarea 上有“overflow-y:scroll”，这甚至可以工作！非常好。

【解决方案2】：

我制作了Tommaso Taruffis代码的jQuery“兼容”版本

function resize_until_scrollbar_is_gone(selector) { 
    $.each($(selector), function(i, elem) {
        while (elem.clientHeight < elem.scrollHeight) {
            $(elem).height($(elem).height()+5);
        }
    });
}

它可以处理多个元素并接受：选择器、jQuery 对象或 DOM 元素。

可以这样调用：

resize_until_scrollbar_is_gone('textarea');

【讨论】：

【解决方案3】：

Tommaso 的解决方案可以完美运行，即使是文本区域也是如此。但是，如果用户输入 textarea 并且突然 textarea 给自己一个滚动条，您的 javascript 将不会知道或被触发。所以您可能想要添加类似

 onKeyUp='has_scrollbar("textareaID")'

【讨论】：

【解决方案4】：

对于 React，我找到了 https://github.com/andreypopp/react-textarea-autosize

import Textarea from 'react-textarea-autosize';
...

<Textarea maxRows={3} />

【讨论】：