JSFiddle - React, Tailwind, and code Playground

by teneff

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.min.js"></script>
<div id="wheel">
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat imperdiet ultricies. Etiam dignissim tellus eget turpis auctor, nec lacinia justo vestibulum. Aliquam cursus vitae eros ac laoreet. Vivamus diam sem, imperdiet id tortor ac, adipiscing facilisis velit. Quisque porta quis libero vel pharetra. Quisque sed consectetur metus, et luctus ligula. Etiam nec venenatis massa.

Sed tincidunt nisl eget massa auctor venenatis. Morbi tellus purus, dignissim quis nisl vitae, iaculis blandit eros. Suspendisse risus mi, faucibus vitae varius at, porta quis ipsum. Phasellus commodo odio eu velit vulputate, nec rutrum velit consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rhoncus elit, non gravida quam. In sed massa sed lacus pellentesque auctor vel quis arcu. Nam in tempus ligula. Curabitur pharetra libero et leo elementum, ac consectetur diam bibendum. Quisque eget euismod mauris, quis cursus mauris. Integer condimentum tempor accumsan. Proin eu lectus quis felis elementum viverra. Proin ut nisi quis leo dictum fermentum. Nullam non felis ac orci semper venenatis sit amet quis magna. Aenean eget libero volutpat, placerat mi a, ultricies nibh.

Donec vel arcu eu ipsum gravida sodales blandit eget augue. Sed dictum leo eu lacus ornare, id fermentum massa dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam varius tellus in libero ornare, quis ornare enim fringilla. Nam eu imperdiet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend tortor ut lacus faucibus pharetra. Proin mi lorem, ultrices nec nisi id, fringilla tincidunt felis. Duis tincidunt nisl id nisi consequat tincidunt. Nunc rhoncus erat sit amet magna luctus congue. Suspendisse ipsum nulla, euismod eget molestie nec,...

CSS

div#wheel {
    width: 300px;
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch
}
div#wheel div {
    width: 5500px;
}

JavaScript

/*
$(function() {

    $("#wheel").on('mousewheel', function(event, delta) {
        this.scrollLeft -= (event.deltaY * event.deltaFactor);
        event.preventDefault();
    });

});
*/