JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div id="scrollme">
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam modi repudiandae eveniet temporibus pariatur mollitia aspernatur fugit accusantium cupiditate error? Velit cupiditate quasi id temporibus quo perferendis voluptas tenetur atque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a nam! Impedit dignissimos consectetur commodi ex quia ipsum quidem mollitia quod debitis provident. Odit omnis dolor illo asperiores qui. Itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis laboriosam architecto fuga voluptatibus perspiciatis? Sit dolores vitae commodi ipsa distinctio quia perspiciatis perferendis vel velit libero eveniet similique corrupti. Ipsum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut hic ex consectetur sequi quo saepe quisquam reiciendis ducimus alias deserunt repudiandae nostrum officiis cupiditate beatae natus et asperiores illum ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque labore obcaecati harum minus consequuntur alias expedita voluptatum autem officiis corporis in hic rerum assumenda ut quidem error minima similique earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolore recusandae iure architecto accusamus aliquid eius magnam ipsa cupiditate porro? Perferendis quibusdam cum quae fuga non dolor ex doloribus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aut ab qui voluptate ex ut odit mollitia similique labore quaerat reiciendis maxime delectus nihil exercitationem neque enim quisquam. Error commodi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero deserunt ad dolor quisquam amet sunt quidem commodi aliquam provident adipisci sit molestias veritatis perspiciatis aliquid quos et nesciunt incidunt voluptate!
    </div>
</div>

CSS

#scrollme {
    width:200px;height:300px;overflow:hidden;
    border:1px solid #ccc
}

JavaScript

// http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

function normalize_mousewheel(e) {
    var //o = e.originalEvent,
        o = e,
        d = o.detail, w = o.wheelDelta,
        n = 225, n1 = n-1;
    
    // Normalize delta
    d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
    // Quadratic scale if |d| > 1
    d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
    // Delta *should* not be greater than 2...
    e.delta = Math.min(Math.max(d / 2, -1), 1);
}



/* Quick cross browser event attach - this is bad mmkay */
var node = document.getElementById('scrollme');

function listener(e) {
    normalize_mousewheel(e);
    node.scrollTop -= 10 * e.delta;
}

if ('onmousewheel' in node) {
    node.onmousewheel = function(e) {
        e = e || window.event;
        listener(e);
    }
} else {
    node.addEventListener('DOMMouseScroll', listener)
}