带有滚动按钮​​的列表滚动器内部

Question

我有一个列表，我需要在div内，并有2个按钮左右滚动。

我需要它来隐藏溢出。

任何人都可以把我放在正确的方向，因为我不知道谷歌的用途是什么？

这是我的初始代码：

<ul id="box-wrapper">
<li>    
    <div class="box">
        Box 1
    </div>
</li>  
<li>    
    <div class="box">
        Box 2
    </div>
</li> 
<li>    
    <div class="box">
        Box 3
    </div>
</li> 
<li>    
    <div class="box">
        Box 4
    </div>
</li> 
<li>    
    <div class="box">
        Box 5
    </div>
</li>      
</ul>
<div class="scroll-left">Left Button</div>
<div class="scroll-right">Left Button</div>

这是我需要的图像：

Answer 1

https://jsfiddle.net/7daffjh8/8/

HTML

<ul id="box-wrapper">
    <li>Box 1</li>
    <li>Box 2</li>
    <li>Box 3</li>
    <li>Box 4</li>
    <li>Box 5</li>
</ul>
<button class="scroll-left">Left Button</button>
<button class="scroll-right">right Button</button>

CSS

ul {
    height:210px;
    display:block;
    overflow-y:hidden;
    overflow-x:auto;
    white-space:nowrap;
}
li {
    list-style-type: none;
    display:inline-block;
    height:200px;
    width:200px;
    background-color:lightblue;
    margin:5px;
}

JS

var scrolled = 0;
$(".scroll-left").on("click" ,function(){
    scrolled=scrolled-300;
    $("ul").animate({
        scrollLeft:  scrolled
    });
});
$(".scroll-right").on("click" ,function(){
    scrolled=scrolled+300;
    $("ul").animate({
        scrollLeft:  scrolled
    });
});