I have been trying to create a list that can be scrolled through by using buttons, while also having a visible and functional scrollbar. However, I am struggling to edit my code in a way that allows both features to work simultaneously. It seems like I can only get either the buttons or the scrollbar to function properly, but not both at the same time. Can anyone offer some assistance with this issue?
var itemsToShow = 3;
$('#scroll>li').each(function(i,k) {
var ele = $(this);
$(ele).attr('id', 'scroll' + i);
});
$('#up').bind('click', function() {
if ($('#scroll0:hidden').length > 0)
{
// This means we can go up
var boundaryTop = $('ul li:visible:first').attr('id');
var boundaryBottom = $('ul li:visible:last').attr('id');
if ($('ul li#'+ boundaryTop).prev().length > 0)
{
$('ul li#'+ boundaryTop).prev().show();
$('ul li#'+ boundaryBottom).hide();
}
}
});
$('#down').bind('click', function() {
if ($('#scroll li:last:hidden').length > 0)
{
// This means we can go down
var boundaryTop = $('#scroll li:visible:first').attr('id');
var boundaryBottom = $('#scroll li:visible:last').attr('id');
if ($('#scroll li#'+ boundaryBottom).next().length > 0)
{
$('#scroll li#'+ boundaryBottom).next().show();
$('#scroll li#'+ boundaryTop).hide();
}
}
});.lg {
overflow-x:auto;
height:90px;
overflow-y:auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lg">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
<div id="updown">
<a class="btn btn-primary" id="up" href="#">up</a>
<a class="btn btn-primary" id="down" href="#">down</a>
</div>I'm feeling a bit stuck here. Could someone please guide me on what I might be doing incorrectly? Your help would be greatly appreciated!
Many thanks in advance!