JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="horizontal_scroller">
        <ul class="horizontal_scroller--inner-container">
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>

        </ul>
    </div>
    
    <div class="horizontal_scroller">
        <ul class="horizontal_scroller--inner-container">
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
        </ul>
    </div>
  
      <div class="horizontal_scroller">
        <ul class="horizontal_scroller--inner-container">
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
            <li class="horizontal_scroller--item"></li>
        </ul>
    </div>

CSS

.horizontal_scroller {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 0;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 2px solid black;
  z-index: 50;
}
.horizontal_scroller--inner-container {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.horizontal_scroller--item {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}

JavaScript

const getTotalWidth = children => Array.from(children).reduce((total, item) => item.offsetWidth + total + 25, 0);
const _normalizeEvent = evt => f => f(window.event || evt);
const _setScrollLeft = delta => mouseEvt => mouseEvt.currentTarget.scrollLeft += delta;
const horizontalScroll = evt => evt.detail ? evt.detail * (-120) : evt.wheelDelta;
const _getChildren = elem => f => f(elem.children[0].children);
const _setWidth = elem => width => elem.children[0].style.width = `${width}px`;
const mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

const _attachListener = elem => name => handler => elem.attachEvent 
	? elem.attachEvent(`on${name}`, handler)
  : elem.addEventListener ? elem.addEventListener(name, handler, false)
  												: alert("Event listener method not found");
                          
const _getScrollers = f => f([].slice.call(document.querySelectorAll(".horizontal_scroller")));

const _main = () => {
	_getScrollers(scrollers => scrollers.forEach(scroller => {
     _getChildren(scroller)(children => _setWidth(scroller)(getTotalWidth(children)));
     _attachListener(scroller)(mousewheelevt)(e => _normalizeEvent(e)(_e => 
     _setScrollLeft(horizontalScroll(_e))(_e)));
  }));
};

_main();