JSFiddle - React, Tailwind, and code Playground

by maxibaezpy

HTML

<body  onload="init()">
<div class="scroll-continer">
<ul id="list" class="scrollable">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<p id="log"></p>
</body>

CSS

.scroll-continer{
  width:350px;
  overflow-x:scroll;
}
.scrollable{
  display:inline-flex;
}
.scrollable li{
  padding:50px;
  list-style:none;
  border:1px solid #eee;
}

JavaScript

function handler(evt){
	
  var log = document.querySelector("#log")
  var entry = document.createElement("p");
  entry.innerText = "weel!!"
  //console.log(evt);
  log.appendChild(entry)
  var list = document.querySelector("#list");
  var left = list.scrollLeft + 10;
  list.scrollTo({
          left: left,
          behavior: 'smooth'
        })
}

function init(){
var list = document.querySelector("#list");
list.addEventListener("wheel", handler);

}