화면 이동 가능한 부모를위한 뷰포트로 자식 div?

Question

이것은 내 질문에 대해 조금 더 잘 설명 할 수 있습니다.

마지막 자식이 가장자리 둘레에만 표시되지만 두 개의 자식 div는 함께 스크롤하고 유지해야합니다. 첫 번째 자식 div 정적의 배경. 이 메사는 뷰포트가 첫 번째 자식이 되겠지만 첫 번째 및 두 번째 자식의 내용은 컨테이너 내에서 스크롤해야하므로 함께 스크롤 할 수 있습니다. 첫 번째 자식이 뷰포트가됩니다.

---

나는 다음과 같은 HTML 구조가 있습니다

<div class="container"> 
    <div class="text"> 
     <div class="row">Row</div> 
     <div class="row">Row</div> 
     <div class="row">Row</div> 
     <div class="row">Row</div> 
     <div class="row">Row</div> 
     <div class="row">Row</div> 
    </div> 
    <div class="bars"> 
     <div class="a"></div> 
     <div class="a"></div> 
     <div class="b"></div> 
     <div class="c"></div> 
     <div class="b"></div> 
     <div class="a"></div> 
    </div> 
</div> 

bars

페이지의 폭으로 확장을하고 text 사업부는 주위에 여유를 가지고, 그 위에 중첩된다. 각 bars div를 시각적으로 대응하는 row과 동일한 수평 레벨로 일치하도록 배치합니다.

text div는 각면에서 x 픽셀이되도록 배치되어 주변에 여백이 생깁니다. 이 방법으로 아래에 bars의 끝을 볼 수 있습니다. 이 여백과 페이지의 경계를 확장 할 수 있도록

마크 업이 쉽고,하지만 난 이것에 대한 CSS를 알아낼 수 없습니다 ...

text은 절대적으로 배치됩니다. 내부 콘텐츠가 범위 내에 있으면 괜찮 으면 좋겠지 만이 경우에는 그렇지 않습니다.

이 설명하는 모든 매우 어렵지만, 기본적으로, 여기에 문제이다 : 나는 rows로 스크롤 bars 필요하기 때문에 내가 overflow:scroll에 container을 설정합니다. text에는 배경 이미지가 있고 그 아래에 rows의 끝을 볼 수 있도록 배치되어 있으므로 position:absolute이어야합니다. 그러나 콘텐츠가 text. I can't add the background image to 컨테이너 because it would cover the ends of the bars의 범위를 초과하는 경우에는 작동하지 않습니다.

의미가 있습니까? 아니? 여기에 jsFiddle이 있습니다. http://jsfiddle.net/charlescarver/BskaP/2/

여전히 의미가 있습니까?

어떤 아이디어 : 여기에 사진입니까? 이 문제를 더 잘 설명 할 수 있도록 몇 가지 질문을하십시오.

Answer 1

거기에 CSS가 많이 필요하지 않습니다 (예 : .container). 제대로 이해한다면 (그리고 100 % 확신 할 수 없다) 페이지 영역의 나머지 부분과 텍스트 스크롤이 고정되어있는 .text div의 이미지를 원합니다.

스크롤 할 때 이미지를 텍스트 div에 놓을 수 없습니다. 오히려 여백 대신에 position: fixed과 padding-bottom:20px을 사용하여 각 .row에 이미지를 두는 것이 좋습니다. 그러면 모든 행 뒤에 이미지가 나타나며 효과가 연속적으로 나타납니다. 그것은 당신에게 당신이

http://jsfiddle.net/BskaP/5/

Answer 2

jQuery의 scrollTop() 함수를 사용하여 스크롤을 기반으로 요소 위치를 가져올 수 있습니다. scroll() 이벤트와 함께 뭔가를 정렬 할 수 있어야합니다.

따라서 이벤트에 행과 텍스트의 위치를 ​​scrollTop() 위치만큼 오프셋하면됩니다.

scrollTop() : http://api.jquery.com/scrollTop/

scroll 이벤트 :

내 초기 생각 http://api.jquery.com/scroll/은 행이 텍스트 뒤에되는 함께 rows 및 text 요소와 가짜을 결합하여 자바 스크립트를 방지하는 것이 었습니다 ...하지만 당신이 주어 특정 상황에서 나는 아무 것도 생각 나지 못했습니다 ...

Answer 3

row에 overflow:auto을 추가해야합니다. 다음은 작동하는 것을 증명하는 jsfiddle입니다. http://jsfiddle.net/BskaP/3/ 예를 들어 여분의 긴 행을 추가했습니다.

이것이 원하는 것인지 알 수는 없지만 생각합니다.