JSFiddle - React, Tailwind, and code Playground

by creativesplash

HTML

<div id="box" class="timeline container" style="overflow-y:scroll; width:100%; white-space:nowrap">
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
</div>

CSS

.boxes {width:75px; height:75px; display:inline-block; border:1px solid #ccc; text-align:center; padding-top:50px;}

JavaScript

// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if (!isPaused) {
        var pos = element.scrollLeft();
        var offset = 1 * direction;
        element.scrollLeft(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollWidth - element.scrollLeft() == element.outerWidth()) || (element.scrollLeft() <= 0)) {
            direction *= -1;
        }
    }

}, 10);

$('#box').hover(

function () {
    isPaused = true;
}, function () {
    isPaused = false;
});