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

Question

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

.buttons是两个包含图像（箭头）的 div，我将在其中将onclick事件绑定到滚动元素（ #scroller ）。 布局具有固定大小，因此ul#scroller （将包含项目并需要滚动的元素）的确切长度为 900 像素。 我认为任何#scroller子<li>的大小将是〜100px。

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

实际上，当项目太多时，下一个将 go 在底部（开始新行）。 相反，我希望新元素 go 在同一行前面，但隐藏（没有点击#button_right ）。

我想用 javascript 来做到这一点，将元素存储在一个数组中，并且只保持前 9 个（x 100px）可见，然后通过单击箭头（比如说，右边的那个）隐藏第一个项目并显示第 10 个。

你认为这是一个好的解决方案吗？

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

提前致谢。

Answer 1

您需要创建一个宽度很长的额外 div，并将其放在#scroller并使#scroller具有overflow: hidden ，因此它不会显示滚动条。

像这样：

html：

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

       (your items)

    </div>
</div>

css：

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

#inner {
    width: 90000px;
}

PS 现在项目不会 go 到另一行，但您需要对按钮进行编码，以便它们根据项目的数量滚动内容，这取决于它们的宽度是否相同，它可能更简单。