Javascript обнаружить полосу прокрутки в текстовой области

Question

Мне было интересно, если кто-нибудь знает, как я буду определять, когда полоса прокрутки появляется внутри textarea.

В настоящее время я использую mootools для своего JavaScript, и у меня возникают проблемы с его обнаружением полосы прокрутки.

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

Я сделал jQuery-совместимую версию Tommaso Taruffis код

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

Решение Tommaso отлично работает даже с текстовой областью.Но если пользователь введет текстовую область, и вдруг текстовая область выдаст себе полосу прокрутки, ваш javascript не узнает или не сработает. Поэтому вы можете добавить что-то вроде

 onKeyUp='has_scrollbar("textareaID")'

Answer 4

Для реакции я нашел https://github.com/andreypopp/react-textarea-autosize

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

<Textarea maxRows={3} />