JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<body>
    <div class="wrap">
        <div class="control_buttons">
            <button onclick="zoom_in('huge')">+</button>
            <button onclick="zoom_out('huge')">-</button>
            <button onclick="move_right('huge')">&lt;</button>
            <button onclick="move_left('huge')">&gt;</button>
            <button onclick="move_down('huge')">up</button>
            <button onclick="move_up('huge')">down</button>
        </div>
        <div class="huge" id="huge">
            <div id="floating1" data-scroll-load="true" data-scroll-callback='$("#floating1").html("Now you see me!!")'></div>
            <div id="floating2" data-scroll-load="true" data-scroll-callback='$("#floating2").html("Now you see me!!")'></div>
        </div>
    </div>
</body>

CSS

html, body, .wrap {
    height:100%;
    min-height:100%;
    max-height:100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    background-color: red;
    position: relative;
    margin:0px;
    padding:0px;
}
.wrap {
    border: 10px dotted red;
    box-sizing: border-box;
}
.control_buttons {
    position:fixed;
    top:5px;
    left:5px;
    z-index:9999;
}
.wrap {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    background-color: blue;
}
div#floating1 {
    background-color:red;
    height: 100px;
    width:200px;
    position: absolute;
    top: 100px;
    left: 700px;
}
div#floating2 {
    background-color:red;
    height: 150px;
    width:250px;
    position: absolute;
    top: 500px;
    left: 200px;
}
.huge {
    width: 1000px;
    min-width: 1000px;
    height: 1000px;
    min-height: 1000px;
    position: relative;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
}

JavaScript

$(function () {
    console.log("Look for: data-scroll-load");
    if ($('[data-scroll-load="true"]').length !== 0) {

        //See https://github.com/dr-dimitru/indira.js/wiki/Changelog

        $('[data-scroll-load="true"]').each(function () {


            var scroll_el_id = $(this).attr('id');
            var element = $(this);
            console.log("BIND SCROLL TO: " + scroll_el_id);

            $(".wrap").unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function (event) {

                console.log("SCROLL BINDED TO: " + scroll_el_id);

                var scrollBottom = $(window).scrollTop() + $(window).height();
                var elementBottom = element[0].scrollHeight + element.offset().top;

                var scrollTop = $(window).scrollTop();
                var elementTop = element.offset().top;

                var scrollRight = $(window).scrollLeft() + $(window).width();
                var elementRight = element[0].scrollWidth - element.offset().left;

                var scrollLeft = $(window).scrollLeft();
                var elementLeft = element.offset().left;
                console.log(scroll_el_id + ': ' + scrollBottom + ' >= ' + elementBottom + ' && ' + scrollTop + ' <= ' + elementTop + ' && ' + scrollRight + ' >= ' + elementRight + ' && ' + scrollLeft + ' <= ' + elementLeft);

                if (scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft) {
                    console.log("TRIGGER CALL BACK ON: " + scroll_el_id);
                    eval($(element).attr('data-scroll-callback'));
                    $('.wrap').unbind('scroll.' + scroll_el_id);
                }
            });

        });
    }
});
var scaleVals = new Object;
var translateVals = new Object;

function zoom_in(elementId) {
    //See http://cssbuilder.veliovgroup.com/
    if (!scaleVals[elementId]) {
        scaleVals[elementId] = 1;
    }
    if (!translateVals[elementId]) {
 ...