jQuery Check if element is visible after scrolling

Html Part:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%;padding-top:100px;">
    <tr>
        <td style="width:50%;vertical-align:top">
            <h3>Partial Visibility Check</h3>

            <div class="scroll" style="height:320px;overflow:auto;border:1px solid blue;position:relative">
                <div class="check d1" style="height:100px;border:1px solid red">DIV 1</div>
                <div class="check d2" style="height:100px;border:1px solid red">DIV 2</div>
                <div class="check d3" style="height:100px;border:1px solid red">DIV 3</div>
                <div class="check d4" style="height:100px;border:10px solid red;padding-top:20px">DIV 4</div>
                <div style='padding:20px;position:relative;border:2px solid green;'>
                    <div style='border:2px solid blue;padding:30px;'>
                        <div class="check d5" style="height:100px;border:1px solid red">DIV 5</div>
                    </div>
                </div>
                <div class="check d6" style="height:100px;border:1px solid red">DIV 6</div>
                <div class="check d7" style="height:100px;border:1px solid red">DIV 7</div>
                <div class="check d8" style="height:100px;border:1px solid red">DIV 8</div>
            </div>
            <div class="log" style='height:140px;overflow:hidden'></div>
        </td>
        <td style="width:50%;vertical-align:top">
            <h3>Fully Visibility Check</h3>

            <div class="scroll full" style="height:320px;overflow:auto;border:1px solid blue;position:relative">
                <div style="height:3px"></div>
                <div class="check d1" style="height:100px;border:1px solid red">DIV 1</div>
                <div class="check d2" style="height:100px;border:1px solid red">DIV 2</div>
                <div class="check d3" style="height:100px;border:1px solid red">DIV 3</div>
                <div class="check d4" style="height:100px;border:1px solid red">DIV 4</div>
                <div class="check d5" style="height:100px;border:1px solid red">DIV 5</div>
                <div class="check d6" style="height:100px;border:1px solid red">DIV 6</div>
                <div class="check d7" style="height:100px;border:1px solid red">DIV 7</div>
                <div style="height:3px"></div>
            </div>
            <div class="log" style='height:128px;overflow:hidden'></div>
        </td>
    </tr>
</table>

jQuery Part:

var log = {};
$("div.scroll").scroll(function () {
    var boundary = $(this), block = boundary.closest("td"), full_view = boundary.hasClass("full");
    log = block.find(".log");
    boundary.find(".check").not(".visited").each(function () {
        var elem = $(this);
        var visited = isScrolledIntoView(boundary, elem, full_view);
        if (visited) {
            log.prepend("DIV.CLASS=\"" + elem.attr("class") + "\" VISITED<br/>");
        }
        else {
            log.prepend("DIV.CLASS=\"" + elem.attr("class") + "\" NOT VISITED<br/>");
        }
    });
});

function isScrolledIntoView(c, e, full_view) {
    var op = e[0].getBoundingClientRect().top - c[0].getBoundingClientRect().top;
    var oh = op + e[0].getBoundingClientRect().height;
    var v1 = c.height() > op && op >= 0;
    var v2 = oh <= c.height() && oh >= 0;
    return full_view === true ? (v1 && v2) : (v1 || v2);
}

Screenshot: