JSFiddle - React, Tailwind, and code Playground

by maxflex

HTML

<div class="div">
        
        <div id="container">
            <div id="right"></div>
        </div>
            
    </div>

CSS

body {
    color: #eee;
    font-family: neoteric;
    width: 5000px;
    overflow-y: hidden;
}

.div {
    width:100%;
    margin: 0px;
    padding: 0px; 
    height: 5000px;
    background-color:#2c2c2c;
}

#container {
    width: 800px;
    height: 2000px;
    margin-left: 0px;
}

#right {
    width: 348px;
    height: 450px;
    margin: 25px;
    background-color: #2ff884; 
    display: inline-block;
    margin-left: 398px;
}

JavaScript

var mouseWheelEvt = function (event) {
    if (document.body.doScroll)
        document.body.doScroll(event.wheelDelta>0?"left":"right");
    else if ((event.wheelDelta || event.detail) > 0)
        document.body.scrollLeft -= 10;
    else
        document.body.scrollLeft += 10;

    return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);