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

Question

I need to create a sort of cart, where I store elements created by the user. I've created a simple scheme to help you understand my needs:

.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements ( #scroller ). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px. I think the size of any #scroller child <li> will be ~100px.

There's a button (not present in the scheme) that allows the user to store in #scroller an item.

Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right ).

I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.

Do you think this is a good solution?

If not, what do you suggest? What CSS rules could help me to do it?

Thanks in advance.

Answer 1

you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.

like this:

html:

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

       (your items)

    </div>
</div>

css:

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

#inner {
    width: 90000px;
}

PS now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.