자식이 더 보이지 않을 때 고정 된 높이와 너비의 div를 가로로 스크롤하는 방법은 무엇입니까?

Question

사용자가 만든 요소를 ​​저장하는 일종의 카트를 만들어야합니다. 난 당신이 내 요구를 이해하는 데 도움이되는 간단한 방식을 만들었습니다

.buttons 내가 요소를 스크롤하는 onclick 이벤트를 바인딩 할 수 있습니다 이미지 (화살표), (#scroller)를 포함하는 두 사업부입니다. 레이아웃의 크기는 고정되어 있으므로 ul#scroller (항목을 포함하고 스크롤해야하는 요소)의 정확한 길이는 900px입니다. 어떤 크기의 #scroller 자식 <li> ~ 100px라고 생각합니다.

사용자가 #scroller 항목에 저장할 수있는 버튼이 있습니다 (구성표에는 없음).

실제로 너무 많은 항목이있는 경우 다음이 하단 (새 줄 시작)으로 이동합니다. 대신 새 요소가 같은 줄에 있지만 숨겨진 (히트가없는 경우 #button_right) 것이 좋습니다.

저는 이것을 자바 스크립트로 배열에 저장하고 첫 번째 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; 
} 

P.S. 이제 항목이 다른 행으로 이동하지는 않지만 항목의 수에 따라 내용을 스크롤 할 수 있도록 단추를 코딩해야합니다. 너비에 따라 항목이 더 간단하거나 간단 할 수 있습니다.