2016-07-19 2 views
1

absolutediv이 있습니다. 이 div은 페이지를 아래로 스크롤 할 때 사용자를 따라갑니다. div에는 서로 옆에 날짜가 들어 있습니다. 다른 div은 그 위의 데이터와 관련된 데이터를 포함하고 있습니다. 그것은 이렇게 보입니다. 당신은 날짜와 정보가 div에 걸쳐 계속, 보시다시피이 모두는 div.절대 위치 지정이 가능한 스크롤 가능 div

1/1/1901 | 1/2/1901 | 1/3/1901 | ... 
Blah  | Blah  | Blah  | ... 

내부에 포함되어 있습니다. 부모의 바깥으로 확장 div.

내측 divs의 양쪽 모두를 포함한 div

내 문제 absolute으로 위치하는 div가 동시에 absolute으로 배치되지 않는다 div로 이동해야하고, 수평으로 스크롤 할 수있다. 그냥 정적으로 유지됩니다.

absolute으로 배치 된 div을 가로로 스크롤하여 볼 수없는 다른 날짜를 볼 수있는 방법이 있습니까?

편집

난 그냥 position: fixed을 추가하려고하고는 스크롤 할 수 중 하나를하지 않았다.

+3

절대적이지 않은 고정을 원한다고 생각한다. –

+1

귀하의 질문에 대한 대답은 '예'입니다. 질문에 대한 해결책을 제시하고 도움을 줄 수 있도록 HTML 및 CSS를 게시하십시오. – Lowkase

+0

'overflow : auto;'또는'overflow : scroll'은 div 스크롤을 허용합니다. * div에는 반드시'height' 또는'max-height'가 있어야 함을 명심하십시오. * – evolutionxbox

답변

3

(완전 그것을보고 전체 페이지를 클릭 할 수 있습니다)이 시도 : https://jsfiddle.net/eebjqmdx/

귀하의 모든 후속 콘텐츠 사업부에 갈 것입니다 :

body{margin:0} 
 
div{height:100vh;width:100vw} 
 
div.page1{background-color: red;} 
 
div.page2{background-color: blue;} 
 
div.page3{background-color: green;} 
 
div.page4{background-color: yellow;} 
 
div.floating{width:20vw;position:fixed;top:5vh;background-color: white;height:5vh;right:0;overflow-x:scroll;white-space:nowrap;line-height:4vh;overflow-y:hidden}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="page1"> </div> 
 
<div class="page2"> </div> 
 
<div class="page3"> </div> 
 
<div class="page4"> </div> 
 
    <div class="floating"> 
 
Blah  | Blah  | Blah  |Blah  | Blah  | Blah  |Blah  | Blah  | Blah  |Blah  | Blah  | Blah  | 
 
    </div> 
 
</body> 
 
</html>
다음

는 바이올린입니다 .floating

EDIT : Updated Fiddle 링크 된 스크롤바에 대해서는 다음을 참조하십시오. https://jsfiddle.net/eebjqmdx/3/ (나는 이것이 당신이 원한 것이라고 생각한다)

+0

이것은 제가 원하는 것 같습니다. 같은 시간에 스크롤 막대를 매핑하는 방법이 있습니까? 떠있는 것을 숨기겠습니까? –

+0

페이지를 아래로 스크롤하면 div가 가로로 스크롤해야합니까? –

+0

두 가로 스크롤 막대를 모두 매핑합니다. 그래서 하나를 스크롤하면 다른 하나가 스크롤됩니다. –

관련 문제