Вместо скролбара кнопки вверх/вниз у div`a

[Prot]

Здравствуйте, помогите пожалуйста, есть див, заданной ширины и высоты, в нём список из <li>,которые не все помещаются, как сделать,чтобы див остался своей ширины, но прокручивание<li> реализовывалось кнопками вверх вниз, а не скролером (в свойствах div стоит overflow:avto, потому и скрол, если что).

[cat]

> остался своей ширины
Высоты, хотел сказать?

https://jsfiddle.net/psr1919plus21/3902569c/

[Prot]

Да, высоты, спасибо за предложенное решение, я тоже нашел реализацию кнопками на jquery. (в архиве подключение jquery и кнопки)

<style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}
 

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
 

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}
 
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
    background:blue;
}
 


 
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
 
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
 

 

 
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}
 
.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}
 
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}
 
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
</style>
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 1
    });
});
</script>
 
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 

Files.zip