JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

CSS

.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}

@keyframes scroll {
  0% {
    top: 0%;
  }
  50% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}

JavaScript

$(document).ready(function() {

  $m = $('.marq');
  $q = $('.qbox');
  var mh = $m.height();
  var qh = $q.height();
  var currscr = 0;
  scroll();

  function scroll() {

    var xpx = mh - qh;
    if (mh > qh) {
      currscr = xpx;
      setInterval(function() {
        autoscroll();
      }, 50);

    } else if (mh == qh ) {
    
      currscr = qh - mh;
      setInterval(function() {
        autoscroll();
      }, 50);
      
    } else {
      console.log("too few items");
    }
  }

  function autoscroll() {

    if (currscr > 0) {
    
      console.log("hello" + currscr);
      var ch = $m.css('top').replace('px', '');
      $m.css('top', (ch - 1) + 'px');
      --currscr;
      
    }

  }



});