如何讓孩子們看不見更多水平滾動的固定高度和寬度的div？

Question

我需要創建一種購物車，在那裏存儲用戶創建的元素。 我創建了一個簡單的方案，以幫助您瞭解我的需求：

.buttons是包含圖像（箭頭），在那裏我會綁定一個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; 
} 

附：現在這些物品不會轉到另一個行，但您需要對這些按鈕進行編碼，以便根據物品的數量滾動內容，具體取決於物品的寬度，同樣可以更簡單。