JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div">
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
    asdasdsadasd<br/>
</div>

<input type="text" id="scroll" />

CSS

#div {
    border: 1px solid #ccc;
    height: 200px;
    overflow: auto;
    width: 200px; }

#inner {
    background: #36f;
    height: 500px;
    width: 20px;

JavaScript

var $div = $('#div'),
    $scroll = $('#scroll'),
    divHeight = $div.innerHeight();

var $temp = $div.clone().css({
    'height': 'auto',
    'visibility': 'hidden'
}).html($div.html()).appendTo($('body'));

var innerHeight = $temp.height();

console.log($temp.height());

$div.scroll(function() {
    var scrollBottom = innerHeight - divHeight - $div.scrollTop();
    
    console.log(divHeight, $div.scrollTop());
    
    $scroll.val(scrollBottom + ' px');
});