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

Question

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

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

有一个按钮(方案中没有)允许用户存储在 #scroller 中一个元素。

实际上，当元素太多时，下一个将放在底部(开始一个新行)。相反，我希望新元素在同一行上继续，但隐藏(不命中 #button_right )。

我想用 javascript 来做到这一点，将元素存储在一个数组中，并仅保持前 9 个(x 100 像素)可见，然后单击箭头(假设是正确的箭头)隐藏第一个元素并显示第 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;
}

附言现在这些元素不会转到另一行，但您需要对按钮进行编码，以便它们根据元素的数量滚动内容，具体取决于它们的宽度是否相同它可以更简单或不.