Javascript 当孩子不可见时，如何使固定高度和宽度的div水平滚动？

我需要创建一种购物车，在那里我存储用户创建的元素。 我创建了一个简单的方案来帮助您了解我的需求：

.button

是包含图像（箭头）的两个div，我将在其中绑定一个

onclick

事件以滚动元素（

#scroller

）。布局具有固定大小，因此

ul#scroller

（将包含项目且需要滚动的元素）的精确长度为900px。 我认为任何

#滚动条
子
的大小都将是~100px

有一个按钮（在方案中不存在）允许用户在
#scroller
中存储项目

实际上，当项目太多时，下一个项目将位于底部（从新行开始）。相反，我希望新元素在同一行上进行，但隐藏（不点击
#button_right
）

我想用javascript实现这一点，将元素存储在一个数组中，只显示前9个（x 100px），然后单击箭头（比方说，右箭头）隐藏第一个项目并显示第10个

你认为这是个好办法吗

如果没有，你有什么建议？什么CSS规则可以帮助我做到这一点

提前感谢。
您需要创建一个宽度很长的额外div，并将其放入
#scroller
中，使
#scroller
具有
溢出：隐藏
，这样它就不会显示滚动条

像这样：

html:

<div id="scroller">
    <div id="inner">

       (your items)

    </div>
</div>

#scroller {
    width: 900px;
    overflow: hidden;
}

#inner {
    width: 90000px;
}

另外，现在项目不会转到另一行，但您需要对按钮进行编码，以便它们根据项目的数量、宽度滚动内容。同样，也可以更简单