고정 된 세로로 스크롤 가능한 요소 가로로

Question

이 항목에 대한 몇 가지 사항을 읽었으며 "실행 가능한"솔루션을 가지고 있습니다. 그러나이를 수행하는 데 더 깔끔하고 덜 흔들리는 방법이 있는지 궁금합니다. 나는 "테이블"을 가지고 있는데 실제로는 테이블로 작동하는 여러 가지 요소가 ul입니다. 머리글 ul 세로 스크롤 위에 고정되어 있지만 가로 스크롤 중에 본문 함께 스크롤 할 수 있습니다. 내가 달성하고자하는 것은 수평 스크롤의 창에 대해 왼쪽에 항상 고정되어 있지만 해당 내용 행으로 세로로 스크롤되는 "고정 된"왼쪽 열을 유지하는 것입니다. 위에서 말했듯이 자바 스크립트를 사용하는 작업 버전이 있지만 터치 장치 (표면 프로, iPad mini)는 멋진 유체 움직임 대신 "얼어 붙은 기둥"을 움직입니다. 수평 스크롤바를 클릭하고 드래그하면 원하는 효과를 얻을 수 있지만 가능하다면 모든 경우에 적용됩니다.

기본 작동 예제가있는 jsfiddle입니다. 다시 말해 내가 말할 수있는 것에서 만 터치가 가능하지 않은 대부분의 장치에서 완벽하게 작동합니다. 외부 모니터에 연결했을 때 내 표면 프로에서 잘 작동하지만 프로 표면만을 사용하면 다시 불안감을 느낍니다.

의견이나 아이디어를 환영합니다.

Answer 1

항상 두 개의 목록이있을 수 있습니다. 그 중 하나는 왼쪽에 고정되어 있고 나머지 하나는 실제로는 여백이있는 스크롤 가능한 컨테이너이며, 왼쪽의 패널 너비와 같으며 나머지 공간을 차지합니다 귀하의 스크롤 가능한 컨텐츠는 제쳐두고 있습니다.

Check this fiddle.

.left { 
    position: absolute; width: 100px; 
} 

.right { /* scrollable */ 
    width: 300px; overflow: scroll; 
} 

...

는 희망이 도움이 응답에 대한