index.html

<div id="foo">
  <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
    <i>1</i>
  <i>2</i>
</div>

<style>
  div {
  white-space: nowrap;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior-x: none;
}

i {
  display: inline-block;
  border: 1px solid grey;
  padding: 50px;
}
</style>

<script>
  const foo = document.getElementById('foo');

foo.addEventListener('wheel', debounce(function(event) {
  if (event.deltaX === 0) {
    return;
  }
  
  const toRight = event.deltaX > 0;
  doScroll(toRight);

  event.preventDefault();
  event.stopPropagation();
}, 16));

function doScroll(toRight) {
  const el = foo;
  const width = el.clientWidth;

  const top = 0;
  const left = toRight ? width : -width;
  el.scrollBy({ top, left, behavior: 'smooth' });
}

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		clearTimeout(timeout);
		timeout = setTimeout(function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		}, wait);
		if (immediate && !timeout) func.apply(context, args);
	};
}
</script>