JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
    
    <head>
        <script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
    </head>
    <body><b>As you see, the horizontal scroll via mousewheel is pretty jumpy, you can see the diffrence if you'll scroll any page with vertical scroll and then look at this one.</b><p><br><p>
    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae velit eros, et cursus lacus. Mauris id eleifend sapien. Pellentesque urna diam, convallis consequat elementum id, varius non leo. Cras iaculis sem vel justo ultricies pretium. Vestibulum ac aliquet arcu. Integer molestie convallis hendrerit. Ut ut tellus tortor. Praesent molestie, ligula ut aliquet cursus, purus orci venenatis eros, a varius dolor purus sit amet nisl.<p>

Duis tempus fringilla vestibulum. Nulla bibendum, urna id accumsan adipiscing, dolor erat commodo ligula, non vehicula elit dolor non ligula. Aliquam eget posuere arcu. Nunc vitae lorem eu elit tempus laoreet. Nunc ornare, risus vel lacinia aliquam, velit ligula interdum leo, vitae lacinia lacus lorem vitae orci. Vestibulum ornare laoreet lectus, quis congue risus tincidunt vel. In pharetra nulla at libero cursus pretium. Ut sed felis tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur varius massa ut felis bibendum mattis. Aliquam eget ligula elit, a laoreet lectus. Sed non mauris erat. Maecenas tincidunt augue nec quam gravida accumsan. Ut pretium varius pellentesque. Vestibulum ut lectus risus. Suspendisse quis lorem nunc.<p>

Sed volutpat lorem vel tortor fringilla vitae fringilla ipsum feugiat. Aliquam ac erat id justo tempor dapibus vitae ac tellus. Donec eget turpis felis. Vivamus sem velit, cursus a scelerisque ut, tincidunt et felis. Nunc massa ipsum, mattis sit amet lobortis id, viverra ut velit. Cras nunc mi, tristique eu blandit at, lobortis mollis lorem. Duis facilisis enim ac mi vestibulum...

CSS

html { 
    overflow-y: hidden;
    overflow-x: scroll;
    }
body {
    background: #f1feff;
    width: 2500px;
    line-height: 1.5;
    color: #000;
    font-size: 14px;
    font-family: Arial,sans-serif;
}

JavaScript

$(function() {
            $("html, body").mousewheel(function(event, delta) {
                this.scrollLeft -= (delta * 30);
                event.preventDefault();
            });
        });