jquery - 内部带有列表滚动条和滚动按钮的 Div

Question

我有一个列表，我需要将其放在 div 中，并有 2 个左右滚动的按钮。

我需要它来 overflow hidden 。

因为我不知道该用谷歌搜索什么，有人能给我指明正确的方向吗？

这是我的初始代码:

<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
    });
});