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

Question

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

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

Answer 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/

Answer 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');

Answer 3

即使在文本区域中，托马索的解决方案也能完美运行。但是，如果用户要在文本区域中键入内容，并且突然文本区域给自己一个滚动条，您的 JavaScript 将不会知道或被触发。因此您可能需要添加类似的内容

 onKeyUp='has_scrollbar("textareaID")'

Answer 4

对于 React，我发现 https://github.com/andreypopp/react-textarea-autosize< /a>

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

<Textarea maxRows={3} />