JSFiddle - React, Tailwind, and code Playground

by jlss

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<button> Scroll to 20</button>
<div id="box">
<ul id="ul">

</ul>
</div>

CSS

#box{
  position: relative;
  overflow: hidden;
  height: 65px;
  max-width: 100%;
  outline: 0;
  direction: ltr;
  white-space: nowrap;
}

/* #box ul{
     position: absolute;
} */

#box li{
  width:50px;
  height:50px;
  //float:left;
  display: inline-block;
  list-style-type: none;
}
.red{
  background-color: red;
}
.black{
  background-color: black;
  color:white;
}
.green{
  background-color:green;
}

JavaScript

//var box = $('.box');
var ul = document.getElementById("ul");

function addLi(i,c,d) {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(i));
  li.setAttribute("class", c); // added line
  li.setAttribute("id", d?"d"+i:i);
  ul.appendChild(li);
  //alert(li.id);
}

function genlis(dup){
  for(var i=0;i<50;i++) {
    if(i==0)
      addLi(i,"green",dup)
    else if(i%2){
      addLi(i,"black",dup)
      //box.append('<div id="el">'+i+'B</div');
    } else {
      addLi(i,"red",dup)
      //box.append('<div id="el">'+i+'R</div');
    }
  }
}
genlis();
genlis(true);

$('button').click(function() {

		//var li = document.getElementById(prompt());
    //li.scrollIntoView();
    var $box_parent = $('#'+prompt())
    var top_offset = $box_parent.position().left;
    var current_margin = $box_parent.parent().css('margin-left').slice(0,-2);
    //alert(current_margin);
    $box_parent.parent().animate({
        'margin-left': current_margin - top_offset
    },1500,'cubic-bezier(0,.84,.11,.99)')

})