JSFiddle - React, Tailwind, and code Playground

HTML

<button id="readOffset">Read Offset</button>
<div id="box">
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem odio, pharetra et tempor eget, ultrices in diam.
        <br />
        <br />Pellentesque sed nunc vitae mauris sodales congue facilisis vitae felis. In feugiat mollis enim, non iaculis ligula convallis id. Integer bibendum tempor quam sit amet eleifend.</div>
</div>
<label for="output">Pixels out of view:
    <div id="output" />

CSS

#box {
    width:200px;
    height:200px;
    background-color: beige;
    overflow: scroll;
    margin-top:20px;
    border:1px solid black;
}

JavaScript

var $box = $('#box');
var $div = $('#content');
var boxHeight = $box.height();
var contentHeight = $div.height();

$('button#readOffset').click(function () {
    var scrollOffset = $box.scrollTop();
    var invisibleSize = contentHeight - (boxHeight + scrollOffset);
    // account for scrollbar and scroll arrow button
    invisibleSize += 17;
    $('#output').text(invisibleSize);
});