Javascript检测textarea中的滚动条

时间:2010-07-13 15:05:07

标签: javascript mootools textarea scrollbar

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

我目前正在为我的JavaScript使用mootools,而我在检测滚动条时遇到问题。

4 个答案:

答案 0 :(得分:32)

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/

答案 1 :(得分:4)

Tommaso的解决方案非常完美,即使是文本区也是如此。但是如果用户输入textarea并且突然textarea给自己一个滚动条,你的javascript就不会知道或被触发。所以你可能想要添加像

这样的东西
 onKeyUp='has_scrollbar("textareaID")'

答案 2 :(得分:4)

我制作了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);
        }
    });
}

它可以处理多个元素并接受:selectors,jQuery对象或DOM元素。

可以像这样调用:

resize_until_scrollbar_is_gone('textarea');

答案 3 :(得分:0)

对于React,我发现了https://github.com/andreypopp/react-textarea-autosize

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

<Textarea maxRows={3} />