This could be the solution you've been seeking!
Check this link out
After spending more than an hour searching for it, I finally found what I needed.
JS:
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.item').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
//alert(itemsWidth);
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};
var getLeftPosi = function(){
//return $('.item:first-child').position().left;
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
/*
var leftPos = $('.item:first-child').position().left;
$('.item').animate({left:"-="+leftPos+"px"},'slow');
*/
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize',function(e){
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
//reAdjust();
});
});
$('.scroller-left').click(function() {
//var leftPos = $('.item:first-child').position().left;
//$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
//$('.scroller-left').hide();
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
CSS:
#topMenu {
background-color:#222;
overflow: auto;
}
#box {
background-color:#111111;
position:relative;
/*margin:0 auto;*/
padding:5px;
width:90%;
}
.scroller {
color:#ffffff;
width:40px;
text-align:center;
cursor:pointer;
display:none;
padding:5px;
margin-top:5px;
}
.scroller-right{
float:right;
}
.scroller-left {
float:left;
}
.wrapper {
position:relative;
margin:0 auto;
overflow:hidden;
padding:5px;
height:50px;
}
.list {
position:absolute;
left:0px;
top:0px;
min-width:3000px;
margin-left:12px;
margin-top:0px;
}
.item{
padding:10px;
/*float:left;*/
display:table-cell;
margin:1px;
position:relative;
text-align:center;
cursor:grab;
cursor:-webkit-grab;
color:#efefef;
border: 1px dotted #111;
vertical-align:middle;
}
HTML:
<div id="topMenu">
<div id="box">
<div class="scroller scroller-left"><i class="icon-chevron-left icon-3x"></i></div>
<div class="scroller scroller-right"><i class="icon-chevron-right icon-3x"></i></div>
<div class="wrapper">
<div class="list">
<div class="item">One</div>
<div class="item">Step 2</div>
<div class="item">Workflow 3<br>sdsdfsdf</div>
<div class="item">4</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">8</div>
<div class="item">Nine</div>
<div class="item">Nine</div>
<div class="item">Nine</div>
<div class="item">Nine</div>
<div class="item">Nine</div>
<div class="item">Ten Ten Ten</div>
<div class="item">Een!</div>
<div class="item">Ereferfewrfen!</div>
<div class="item">Eerferfen!</div>
<div class="item">WWW!</div>
<div class="item">Ten Ten Ten</div>
<div class="item">Een!</div>
<div class="item">Ereferfewrfen!</div>
<div class="item">Eerferfen!</div>
<div class="item">Ten Ten Ten</div>
<div class="item">Een!</div>
<div class="item">Ereferfewrfen!</div>
<div class="item">Last item</div>
</div>
</div>
</div>
</div>