Javascript detect scrollbar in textarea

Question

I was wondering if anybody knows how I would go about detecting when the scrollbar appears inside a textarea.

I am currently using mootools for my JavaScript and I am having issues getting it to detect a scrollbar.

because I wanted to use it to detect when 3 lines of text had been placed in a textbox and stop allowing any more characters being entered. — Jamie, Jul 13 '10 at 15:35

score 43 · Accepted Answer · edited Dec 15 '17 at 17:31

43

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.");
}

See this jsFiddle http://jsfiddle.net/qKNXH/

edited Dec 15 '17 at 17:31

Sunrise

175
1
13

answered Jul 13 '10 at 15:09

Tommaso Taruffi

8,932
9
44
56

Since this is a very old question I've edited this answer to add a fiddle forked off @Castrohenge 's code. – caiosm1005 Feb 06 '13 at 19:34
This even works if you have "overflow-y: scroll" on the textarea! Very nice. – Andrew Steitz Mar 10 '21 at 21:43

score 7 · Answer 2 · edited May 23 '17 at 12:18

I made a jQuery "compatible" version of Tommaso Taruffis code

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

It can handle multiple elements and accepts: selectors, jQuery objects, or DOM elements.

It can be called like this:

resize_until_scrollbar_is_gone('textarea');

score 5 · Answer 3 · edited Nov 01 '11 at 21:08

5

Tommaso's solution works perfectly, even with a text area. But if the user were to type in the textarea and suddenly the textarea gave itself a scrollbar, your javascript wouldn't know or be triggered.So you might want to add something like

 onKeyUp='has_scrollbar("textareaID")'

edited Nov 01 '11 at 21:08

ceejayoz

176,543
40
303
368

answered Jul 13 '10 at 15:25

Capt Otis

1,250
1
12
18

Alex Kumundzhiev · Answer 4 · 2018-10-29T18:15:21.910

-1

For React I've found https://github.com/andreypopp/react-textarea-autosize

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

<Textarea maxRows={3} />

edited Oct 29 '18 at 18:15

answered Oct 29 '18 at 16:09

Alex Kumundzhiev

245
3
10

Javascript detect scrollbar in textarea

4 Answers4

Linked

Related