JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="block">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores sunt hic maxime vitae mollitia totam illo reiciendis modi consequatur excepturi sit earum! Similique quibusdam fugit! Officiis temporibus libero porro!
    </div>
</div>

CSS

.block {
    width: 100%;
    height: 1000px;
    overflow:auto;
}

.content {
    width: 300%;
    height: 100%;

    background: linear-gradient(to right, red, blue);
    color: #fff;
    font-size: 1.5em;
}

JavaScript

var block = document.querySelector('.block');
block.addEventListener("wheel", function(e){
    e.stopPropagation();
    var scroll = block.scrollLeft;
    console.log(scroll);
    block.scrollLeft = (scroll + e.deltaY);
});;