<div id="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
</div>

#container {
  display: flex;
  overflow-x: scroll;
  
  max-width: 50rem;
  margin: 0 auto;
}

#container p {
  font-family: sans-serif;
  
  border-radius: 8px;
  background: #ff6961;
  color: white;
  
  padding: 2rem 3rem;
  margin: 2rem 1rem;
}

const element = document.querySelector("#container");

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
    
  });
});