I am currently working on a scrolling tab feature and encountering an issue. I am unable to click on the middle tabs as the scrolling movement is too abrupt when using the right button. How can I adjust the code to allow for a smoother scroll of the tabs? Any suggestions would be greatly appreciated.
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function() {
var itemsWidth = 0;
$('.list a').each(function() {
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function() {
return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};
var getLeftPosi = function() {
return $('.list').position().left;
};
var reAdjust = function() {
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show().css('display', 'flex');
} else {
$('.scroller-right').hide();
}
if (getLeftPosi() < 0) {
$('.scroller-left').show().css('display', 'flex');
} 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() {
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow', function() {
});
});
Fiddle http://jsfiddle.net/vedankita/2uswn4od/13
Can someone assist me in implementing a smoother scroll on button click to enable easier access to the tabs? Thank you in advance.