Html Part:
jQuery Part:
Screenshot:
<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: