JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="container">
  <li>
    <i class="one"></i>
  </li>
  <li>
    <i class="two"></i>
  </li>
  <li>
    <i class="three"></i>
  </li>
</ul>

<div id="container2-wrapper">
    <ul id="container2">
      <li>
        <i class="one"></i>
      </li>
      <li>
        <i class="two"></i>
      </li>
      <li>
        <i class="three"></i>
      </li>
      <li>
        <i class="four"></i>
      </li>
      <li>
        <i class="five"></i>
      </li>
    </ul>
</div>

SCSS

li {
  display: block;

  .horizontal & {
    display: inline-block;
    margin-right: -.3em;
  }
}
i {
  display: block;
  height: 100px;
  width: 200px;
  
  .horizontal & {
    height: 200px;
    width: 200px;
  }
}

.one {
  background: blue;
}
.two {
  background: yellow;
}
.three {
  background: green;
}
.four {
  background: purple;
}
.five {
  background: teal;
}

#container {
  display: none;
}
#container2-wrapper {
  height: 300px;
  overflow: hidden;
}

JavaScript

// on scroll... endless scrolling!
// fyi: can use wheelDeltaX & wheelDeltaY to get vert/horiz axis in webkit!
$('#container').on('mousewheel', function(e){
  var li = $("<li>");

  // scrolling up  
  if (e.originalEvent.wheelDelta / 120 > 0) {
    li.prependTo("#container");
    
    $('#container li').last().find('i').appendTo(li);
    $('#container li').last().remove();
  } 
  
  // scrolling down
  else if (e.originalEvent.wheelDelta / 120 < 0) {
    li.appendTo("#container");
    
    $('#container li').first().find('i').appendTo(li);
    $('#container li').first().remove();
  }
});

var evTop, elTop;

// test for dragging container
var $container = $('#container2');
$container.on('mousedown', function(e){
  evTop = e.pageY;
  elTop = $container.offset().top;
    
  $(document).on('mousemove', function(e){
    console.log('yo')
    $container.css('-webkit-transform', 'translate(0,' + (elTop - evTop + e.pageY) + 'px) translateZ(0) scale(1)');
  });
  $(document).on('mouseup', function(e){
    $(document).off('mousemove mouseup');    
  });
});