Javascript 容器内的水平滚动条

我对javascript非常陌生，我正在尝试创建一个水平滚动div：-

你可以看到菜单链接指向每种颜色，但我想把它放在一个250x250px的容器中，这样只有一种颜色可见，然后你点击任何一个链接，它就会滚动到该颜色

希望有人能给我一些建议

谢谢

jQuery（文档）.ready（函数（$）{
$（“.scroll”）。单击（函数（事件）{
event.preventDefault（）；
$（'html，body'）。设置动画({
scrollLeft:$（this.hash）.offset（）.left
}, 200);
});
});
.container{
空白：nowrap；
}
.子元素{
最小宽度：250px；
显示：内联块；
高度：250px；
}
.儿童1{
背景颜色：紫色；
}
.儿童2{
背景颜色：橙色；
}
.儿童3{
背景色：黑色；
}
.儿童4{
背景颜色：绿色；
}
.儿童5{
背景颜色：蓝色；
}
.儿童6{
背景色：红色；
}
CSS
解决方案，尝试将此添加到CSS中的元素中

overflow-x: scroll;

这应该可以为您完成。
您需要两个更改才能使其正常工作

首先，为容器添加高度和宽度，然后在css中设置溢出

width:250px;
height:250px;
overflow: auto;

第二次更新jquery以设置容器的动画，现在它正在设置实体的动画

$('.single-box').animate({

JSFIDLE可在以下链接中使用

正如@Script47所提到的，除了
宽度（用作视口）之外，您还需要将
溢出-x
作为CSS属性应用于元素。以下是最终CSS的外观：

.container {
    white-space: nowrap;
    overflow-x: scroll;
    width: 250px;
    position: relative;
}

jQuery(document).ready(function ($) {

    $(".scroll").click(function (event) {
        var current = $('.container').scrollLeft();
        var left = $(this.hash).position().left;        

        event.preventDefault();

        $('.container').animate({
            scrollLeft: current + left
        }, 200);
    });
});

之后，您需要稍微修改JS。您仍然需要滚动到元素的
偏移量
，但还需要考虑当前的
滚动位置

（为了澄清，如果单击最初偏移量为
250px
的
orange
，则在动画后期，橙色的偏移量将为
0px
，而
黑色的偏移量将为
250px
。如果单击
黑色的偏移量
，它将尝试滚动到
250px
，这是橙色元素。）

以下是更新后的JS的外观：

.container {
    white-space: nowrap;
    overflow-x: scroll;
    width: 250px;
    position: relative;
}

jQuery(document).ready(function ($) {

    $(".scroll").click(function (event) {
        var current = $('.container').scrollLeft();
        var left = $(this.hash).position().left;        

        event.preventDefault();

        $('.container').animate({
            scrollLeft: current + left
        }, 200);
    });
});

用小提琴演示：

对于fiddle，我使用
删除了HTML中的物理
空白
（以防止div之间有空格），还向包含元素添加了
position:relative
（要使用
position
）
，如果希望div可以滚动，只需使用css即可

   .container {
       white-space: nowrap;
       overflow-x: scroll;
       width: 250px;
       position: relative;
  }

编辑添加了一个答案。这正是我想要做的。非常感谢。