2011-04-22 9 views
3

요소 상단 x, y 축에 고정 된 요소가 있습니다. x 축에서만 고정되도록 변경하는 방법이 있습니까? 예 : 그래서 고정 된 요소를 왼쪽과 오른쪽으로 스크롤 할 수 있습니다.상단에 요소 고정

현재 코드 :

<div style="position:fixed;top:0;width:2000px;"> 
The fixed header element 
</div> 
<div style="overflow:auto;width:2000px;"> 
the scrollable content element 
</div> 
+0

'overflow-x' 또는'overflow-y'가 필요하다고 가정 할 것입니다. 귀하의 질문은 명확하지 않습니다. – Khez

+0

웹 사이트를 스크롤 할 때마다 첫 번째 요소 (위치가 고정 된 요소)를 왼쪽 또는 오른쪽 (y 축)으로 스크롤하려고합니다. – MJA

+0

나는 순수 CSS가 이것을 할 수 있다고 생각지 않는다. 자바 스크립트는 당신의 필요를 충족시키는 해결책이다. –

답변

1

이 훌륭한 질문은와 CSS3 당신을 위해 아무 대답이 없다. 하나의 축에는 요소를 고정시킬 수는 있지만 다른 요소에는 고정시킬 수 없습니다.

이상적인 솔루션 인 imo는 position : fixed-x 및 position : fixed-y와 같은 CSS3 속성을 제공합니다. 그러나 그런 것은 없습니다.

이 매우 유용한 동작을 알고있는 유일한 방법은 JavaScript 함수를 작성하여 setInterval() 이벤트를 처리하는 것입니다. 각 이벤트에서 현재 X 또는 Y 스크롤 위치를 폴링합니다. 그리고 수정하려는 축의 스크롤 위치가 변경된 경우 고정 요소의 스크롤 위치를 변경하여 보정합니다. 즉, 고정 요소의 스크롤 위치를 변경하여 해당 요소가 속한 곳으로 다시 이동시킵니다.

실제로이 방법을 사용하면 효과가 있지만 고통 스럽습니다. 내 코드는 X와 Y 스크롤 위치를 매 10 분의 1 초마다 폴링합니다. 너무 자주 보이지 않을만큼 충분합니다.

직장에서 해결책을 볼 수 있습니다. in this long table. 창을 좁히려면 가로 스크롤 막대가 나타나고, 테이블을 왼쪽이나 오른쪽으로 스크롤하십시오. 열 머리글은 테이블과 함께 이동하지만 테이블 본문을 세로로 스크롤 할 수 있으며 열 머리글은 그대로 유지됩니다.

관련 문제