JSFiddle - React, Tailwind, and code Playground

by jstoudt

HTML

<h3>Textarea:</h3>
<textarea id="scrollpane1" class="enscrollable">Lorem
ipsum
dolor
sit
amet,
consectetur
adipisicing
elit.
Perspiciatis,
saepe,
laborum
facere
voluptates
ullam
pariatur
reiciendis
quas
ea
natus
officiis
illum
libero
delectus
vitae
reprehenderit
ipsum.
Impedit
esse
ratione
aspernatur!</textarea>

<h3>Div:</h3>
<div id="scrollpane2" class="enscrollable">Lorem
ipsum
dolor
sit
amet,
consectetur
adipisicing
elit.
Perspiciatis,
saepe,
laborum
facere
voluptates
ullam
pariatur
reiciendis
quas
ea
natus
officiis
illum
libero
delectus
vitae
reprehenderit
ipsum.
Impedit
esse
ratione
aspernatur!</div>

<ul>
    <li>
        <label>Textarea ScrollHeight:</label>
        <span id="textarea-scrollheight"></span>
    </li>
    <li>
        <label>Div ScrollHeight:</label>
        <span id="div-scrollheight"></span>
    </li>
</ul>

CSS

h3 {
    margin: 0;
}

.enscrollable {
    width: 260px;
    height: 130px;
    overflow: hidden;
    resize: none;
    border: 1px solid #909090;
    padding: 20px 0;
    font: 16px/20px Arial, sans-serif;
    white-space: pre-line;
}

ul {
    list-style: none;
    margin-top: 3em;
    padding: 0;
}

JavaScript

function displayScrollHeight(targetId, displayId) {
    var target = document.getElementById(targetId);
    var dispElem = document.getElementById(displayId);
    
    var t = document.createTextNode(target.scrollHeight);
    dispElem.appendChild(t);
}

displayScrollHeight('scrollpane1', 'textarea-scrollheight');
displayScrollHeight('scrollpane2', 'div-scrollheight');