JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<div id="scroll-container">
    <div class="element" style="transform: translateY(16777074px)">Element 1</div>
    <div class="element" style="transform: translateY(16777120px)">Element 2</div>
    <div class="element" style="transform: translateY(16777166px)">Element 3</div>
    <div class="element" style="transform: translateY(16777212px)">Element 4</div>
</div>

CSS

#scroll-container {
    background: #ccc;
    height: 250px;
    overflow-y: auto;
    border: 1px solid red;
    position: relative;
}

.element {
    height: 20px;
    border: 1px dashed green;
    position: absolute;
}

JavaScript

const sc = document.getElementById('scroll-container');

console.log(sc.scrollHeight);