JSFiddle - React, Tailwind, and code Playground

by iscrow

HTML

<div style="width: 50px; overflow: none;">

  <div class="timeline-arrow">
  Arrow
  </div>
  <div class="timeline" style="width: 200px; overflow: scroll; white-space: nowrap">
  some super long content some super long content some super long content some super long content some super long content some super long content some super long content some super long content some super long content 
  </div>

</div>

JavaScript

jQuery(document).ready(function ($) {
     
    var timelineArrow=$(".timeline-arrow");
    var timeline=$(".timeline");
 
    function timelineStop() {
        timeline.stop()
    }
    
    function timelineTouch() {
        if( timeline.is(':animated') ) {
            timelineStop();
        } else {
        if ( $(window).width() <= 1829)
            timeline.animate({ scrollLeft: timeline.get(0).scrollWidth }, 5000);
        }
    }
     
    timelineArrow.bind('click touchstart', function (event) {
        event.preventDefault(); //Don't trigger mouse events if touch detected.
        timelineTouch();
    });
    
    timelineArrow.mouseover( function () {
        timelineTouch();
    });
    
    timelineArrow.mouseout( function () {
        timelineStop();
    });
    timeline.bind('mouseover click touchstart', function () {
        timelineStop();
    });
 });