JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/min/perfect-scrollbar.min.js"></script>
<div ng-app="myApp" ng-controller="c">

  <div class="sect" scroll>
    <div class="holder">
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
    
    </div>
    
  </div>
  
   <div class="sect" scroll>
    <div class="holder">
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
    
    </div>
   
    
  </div>

</div>

CSS

.sect
{
  overflow:hidden;
  position:relative;
  width:100%;
  
  background:white;
}

.holder
{
  padding:8px;
  white-space:nowrap;
}

.entry
{
  width:160px;
  height:160px;
  background:deepskyblue;
  display:inline-block;
}

JavaScript

var mod =angular.module('myApp',[]);

mod.controller('c',function($scope,$timeout){
	
  /*initscroll();
  
  setTimeout(function(){
  	h = document.querySelector('.holder');
    
    for(var t = 0; t < 8; t++)
    {
    	h.innerHTML += '<div class="entry"></div>';
    
    }
    
  },1000);*/

});

function initscroll()
{
	Ps.initialize(document.querySelector('.sect'));

}

mod.directive('scroll',function(){
	return {
  	
    link:function(scope,elem)
    {
    	setTimeout(function(){
      	Ps.initialize(elem[0]);
      },800);
    
    }
  
  };

});