JSFiddle - React, Tailwind, and code Playground

by dalesaurus

HTML

<div style="height: 1000px; width: 100%; padding: 100px 0;">
    <div id="box" style="background-color: #777;">
        <div id="s1" class="watch" style="margin: 200px 0;background-color: blue;">
            Hello
        </div>
        <div id="s2" class="watch" style="margin: 200px 0;background-color: orange;">
            Hello
        </div>
        <div id="s3" class="watch" style="margin: 200px 0;background-color: yellow;">
            Hello
        </div>
    </div>
</div>

JavaScript

(function($) {
        var timer, $context, onetime = true,
            watchme = [],
            settings = {
                context: null,
                debounce: 250,
                edge_threshold: 0  // Add pixels to window...test this
            };
        var methods = {
            init: function() {
                return this.each(function() {
                    if (typeof $(this).data('inview-status') === 'undefined') {
                        watchme.push(this);
                        $(this).data('inview-status', 'watched');
                    }
                });
            },
            refresh: function() {
                if (timer) clearTimeout(timer);
    
                timer = setTimeout(function() {
                    var viewport = {
                        x2: $context.width() + $context.scrollLeft(),
                        y2: $context.height() + $context.scrollTop()
                    };
                    viewport.x1 = viewport.x2 - $context.width();
                    viewport.y1 = viewport.y2 - $context.height();
                    
                    if( settings.edge_threshold ) {
                        viewport.x1 -= settings.edge_threshold;
                        viewport.y1 -= settings.edge_threshold;
                        viewport.x2 += settings.edge_threshold;
                        viewport.y2 += settings.edge_threshold;
                    }
                    
                    $(watchme).each(function() {
                        var $this = $(this),
                            pos = $this.offset(),
                            me = {
                                x1: pos.left,
                                y1: pos.top,
                                x2: $this.width() + pos.left,
                                y2: $this.height() + pos.top
                            };
                        if (
                            ( // Top Left In View
                              (me.x1 >=...