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

Question

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

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

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

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

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

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

如果没有，你有什么建议？什么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;
}

P.S。现在这些项目不会转到另一个行，但你需要对按钮进行编码，以便根据项目的数量滚动内容，具体取决于它们的宽度，它可以更简单或更简单