JSFiddle - React, Tailwind, and code Playground

by Pasit R

HTML

<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script src="https://rawgit.com/Darsain/sly/master/src/sly.js"></script>
<script src="https://rawgit.com/kamilkp/angular-vs-repeat/master/src/angular-vs-repeat.js"></script>
<div ng-app="One">
    <div ng-controller="Ctrl1 as ctrl" class="wrap">
        <div class="scrollbar-area">
            <div class="scrollbar">
                <div class="handle">
                    <div class="mousearea"></div>
                </div>
            </div>
        </div>
        <div class="frame" id="smart">
              <ul class="items" vs-repeat>
                
                       <li ng-repeat="item in ctrl.list track by $index">{{ item.title }}</li>
               
            </ul>
        </div>
        
        
      <ul class="items2" vs-repeat>
                <li ng-repeat="item in ctrl.list track by $index">{{ item.title }}</li>
            </ul>
    </div>
</div>

CSS

/* Example wrapper */


/* Frame */
.frame {
	width: 510px;
	height: 200px;
	overflow: auto;
	border: 1px solid #444;
}
.frame ul {
	background: #fff;
	width: 100%;
}
.frame ul.items {
	list-style: none;
	margin: 0;
	padding: 0;
    overflow: auto;
}
.frame ul.items li {
	float: left;
	width: 100%;
	height: 30px;
	padding: 0;
	background: #333;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
.frame ul.items li.active {
	color: #fff;
	background: #a03232;
}

/* Scrollbar */
.scrollbar-area {
    position: absolute;
	right: 10px;
	width: 2px;
	height: 200px;
	background: #ccc;
	line-height: 0;
}

.scrollbar {
	position: absolute;
	right: 10px;
	width: 20px;
	height: 200px;
	line-height: 0;
}
.scrollbar .handle {
	width: 2px;
    margin-left: 29px;
	height: 600px;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: 0;
	left: -10px;
	width: 22px;
	height: 100%;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
    height: 200px;	
    overflow: hidden;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;

	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { margin: 25px 0; text-align: center; }

.items2 {
    width: 100px;
    height: 100px;
    overflow: auto;
}

.items2 li {
    width: 100%;
    height: 20px;
}

/* ::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

scrollbar-base-color:...

JavaScript

'use strict';

angular.module('One', ['vs-repeat'])
	.controller('Ctrl1', function ($timeout) {
        var vm = this;	
        
        vm.list = [];
        var list = [];
        for (var i = 0; i< 1000; i++) {
            list.push({ title: 'Title ' + i });
        }
        vm.list = list;
        
        $timeout(function () {
            //angular.element('#dd').mCustomScrollbar();
            
            
            var $frame  = $('#smart');
            var $slidee = $frame.children('ul').eq(0);
            var $wrap   = $frame.parent();
            
            var sll = new Sly( $frame, {
                itemNav: 'basic',
                smart: 1,
                activateOn: 'click',
                mouseDragging: 1,
                touchDragging: 1,
                releaseSwing: 1,
                startAt: 1,
                scrollBar: $wrap.find('.scrollbar'),
                scrollBy: 1,
                activatePageOn: 'click',
                speed: 300,
                elasticBounds: 1,
                dragHandle: 1,
                dynamicHandle: 1,
                clickBar: 1,
            }).init();  
            
            sll.on('change', function (evt) {
                console.log(sll.pos)
            });
        }); 
        
        
	})
.directive('ntList', ['$timeout', '$compile', function ($timeout, $compile) {
    return {
        template: 
        '<div><ul vs-repeat>' +
        '<li ng-repeat="item in list track by $index">{{ item.title }}</li>' +
        '</ul></div>',
        scope: {
            list: '=?'
        },
        link: function (scope, jqElm, attr) {
        }
    };
}])
;