JSFiddle - React, Tailwind, and code Playground

by rome_margo

HTML

<div id="parent">
  <div class="img-container">
     <img src="https://source.unsplash.com/400x400/?water">
    <img src="https://source.unsplash.com/400x400/?nature">
    <img src="https://source.unsplash.com/random/400x400">
     <img src="https://source.unsplash.com/400x400/?fire">
    <img src="https://source.unsplash.com/400x400/?nature">
    <img src="https://source.unsplash.com/random/400x400">
    <img src="https://source.unsplash.com/400x400/?nature">
    <img src="https://source.unsplash.com/400x400/?water">
    <img src="https://source.unsplash.com/400x400/?light">
    <img src="https://source.unsplash.com/400x400/?dark">
    <img src="https://source.unsplash.com/random/400x400">
  </div>
</div>

SCSS

#parent {
  width: 99vw;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: hidden;
    
  .img-container {
   padding: 0px;
   margin: 0px;
   height: 100px;
   width: 1200px;

    img {
    height: 90px;
    width: 100px;
    padding: 5px;
    background: #123;
    }
  }
}

JavaScript

var scroller = {};
scroller.e = document.getElementById("parent");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#b').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.img-container').width()) {
        pst = $('.img-container').width();
    }

    $('#parent').scrollLeft(pst);

    return false;
}