JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<div id="box">
<div id="scrollbox">
    <div id="content">
        -- 0<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 5<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 10<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 15<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 20<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 25<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 30<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 35<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 40<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 45<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 50<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 55<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 60<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 65<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 70<br>
        .<br>
        .<br>
        .<br>
        .<br>
        - 75<br>
        .<br>
        .<br>
        .<br>
        .<br>
        -- 80<br>
    </div>
</div>
</div>
<div id="debug">
</div>

CSS

#box { margin: 1em; width: 10em; height: 20em; padding: 0.5em; border: 1px solid black }
#scrollbox { width: 100%; height: 100%; overflow: scroll; }

JavaScript

(function() {
    var scrollbox = document.getElementById("scrollbox"),
        content = document.getElementById("content"),
        debug = document.getElementById("debug"),
        log = function(m) { debug.innerHTML = m; },
        touchStart = null,
        lastTouch = null,
        isScroll = false,
        startLeft = 0,
        startTop = 0;
    scrollbox.addEventListener("touchstart", function(e) {
        e.preventDefault();
        if (e.touches && e.touches.length) {
            lastTouch = touchStart = e.touches[0];
            isScroll = false;
            startLeft = scrollbox.scrollLeft;
            startTop = scrollbox.scrollTop;
            log('touch start = {'+touchStart.screenX+','+touchStart.screenY+') scroll pos = {'+startLeft+','+startTop+')');
        }   
    }); 
    scrollbox.addEventListener("touchmove", function(e) {
        e.preventDefault();
        if (e.touches && e.touches.length) {
            lastTouch = e.touches[0];
            var x = touchStart.screenX - lastTouch.screenX;
            var y = touchStart.screenY - lastTouch.screenY;
            if (!isScroll) {
                isScroll = (x > 1 || x < -1 || y > 1 || y < -1);
            }
            if (x === 0 && y === 0) { 
                log('IGNORED pos = {'+scrollbox.scrollLeft+','+scrollbox.scrollTop+') moved {'+x+','+y+'}');
            } else if (isScroll) {
                scrollbox.scrollLeft = startLeft + x;
                scrollbox.scrollTop = startTop + y;
                log('new pos = {'+scrollbox.scrollLeft+','+scrollbox.scrollTop+') moved {'+x+','+y+'}');
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("scroll", true, true);
                scrollbox.dispatchEvent(evt);
            }
        }   
    }); 
    scrollbox.addEventListener("touchend", function(e) {
        e.preventDefault();
        if (!isScroll) {
            // generate a click event
            var evt =...