JSFiddle - React, Tailwind, and code Playground

by jaschahal

HTML

<script src="http://brandonaaron.net/javascripts/plugins/mousewheel.js"></script>
<div style="width:500px !important;height:200px;overflow:scroll" id="handle">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohelohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>

JavaScript

$(document).ready(function() {
    $('#handle').bind('mousewheel', function(event, delta) {
        val = this.scrollLeft - (delta * 50);
        jQuery(this).stop().animate({
            scrollLeft: val
        }, 500);
        event.preventDefault();
    });
});