콘테이너 크기 내의 내용이 많습니다

Question

나는 많은 포스트를 통해서 가고 해결책을 찾아 낼 수 없었다. (나는 this post에서 유사한 문제를 보았지만 실제로 정확한 상황과 관련이 없다.)

문제점 : 화면에 30 개 이상의 열이있는 대용량 데이터 테이블을 표시해야합니다. 내 도전 과제는 클라이언트가 수평 스크롤 바를 좋아하지 않는다는 것입니다.

저는 테이블을 조각으로 나누고 Jquery : "serialScroll"또는 "ContentSlider"와 같은 간단한 슬라이더를 사용하려고합니다. 그러나 또 다른 도전 과제는 다음과 같습니다. 508 규정 준수를 위해 내 테이블은 여러 슬라이드를 여러 테이블로 분할하는 대신 하나의 테이블이어야합니다.

비전이 있습니다 "큰 테이블"위에 "뷰 파인더"div가 필요합니다. div의 크기를 왼쪽과 오른쪽으로 이동하려면 컨트롤을 사용하십시오. http://img202.imageshack.us/i/tableviewfinderidea.jpg/.

내 질문은 :

• JS 또는 JQuery와 솔루션을 거기 밖으로 이렇게? (진지하게 행운없이 2 주를 검색했습니다.)

• 다른 권장 사항이 있습니까?

Answer 1

'overflow : hidden'으로 스타일이 지정된 컨테이너 div를 사용하면 그래픽에 표시된대로 마스킹을 수행 할 수 있습니다. 마스크 된 내용을 'position : absolute'로 설정하고 'left'값을 미세 조정하여 쉽게 이동할 수 있습니다.

은 내가 유일한 것은 당신이 너무 마스크의 높이를 설정해야 당신이, 컨텐츠의 높이가 스크롤되는 것을 알 필요가있다 http://jsfiddle.net/BDZPj/

에서이 온라인에 대한 간단한 예를 넣습니다. 당신은 document.ready에있는 테이블로부터 높이를 읽을 수 있었고 처음에 그것을 컨테이너에 적용 할 수있었습니다.

어쨌든 위의 설명에서 'Pointy'와 같이 표준 스크롤바를 사용하는 것이 가장 좋은 방법입니다. 때로는 클라이언트도 이동해야합니다.