JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<script src="https://raw.github.com/blesh/jquery-offscreen-event.js/master/compressed/jquery-offscreen-event.min.js"></script>
<div class="container">
<button id="add">Click To Add A Div</button>
... then scroll around!
</div>

CSS

.container {
    width: 10000px;
    height: 10000px;
}
.item {
    position: absolute;
    width: 50px;
    height: 50px;
    background: gainsboro;
    font-family: arial, helvetica, sans-serif;
    color: white;
    padding: 3px;
}
.item.has-been-off {
    background: red;
}

JavaScript

//jquery offscreen example

$('#add').click(function() {
    var container = $('.container'),
        w = $(window),
        x = Math.random() * w.width(),
        y = Math.random() * w.height();
    $('<div class="item"/>').appendTo(container).css({
        left: x + 'px',
        top: y + 'px'
    });
});

$('.container').on('offscreen', '.item', function(e) {
    var item = $(this).addClass('has-been-off');
    var most = item.data('most') || { top: 0, left: 0};
    most.top = Math.max(e.offscreen.top, most.top);
    most.left = Math.max(e.offscreen.left, most.left);
    item.data('most', most);
    item.html('x: ' + parseInt(most.left) + '<br/> y: ' + parseInt(most.top));
});