div의 특정 섹션 만 스크롤 가능으로 만들기

Question

CSS에 대한 쿼리가 있는데 알아 내려고 노력하고 있습니다. 예를 들어

<div class='a'> 
     <div class='b'> 
     </div> 

     <div class='c'> 
     <div> 
</div> 

: 여기

는 HTML이고 클래스 'a'가있는 div가 있습니다. 오버플로되면이 div 전체를 스크롤 할 수 있기를 바랍니다. 또한 클래스 'c'를 사용하여 div를 스크롤하고 싶지만 클래스 'b'가있는 div를 페이지에 고정시키고 싶습니다. 다른 div에 대한 스크롤링이 제공되는 경우에도 동일한 위치에 표시되어야합니다.

누군가가 방법이 있다면 알려주실 수 있습니까?

Answer 1

당신이 원하는 레이아웃이 무엇인지 확실하지 않지만 CSS에 overlow-y:scroll;을 사용하려고합니다. div에 스크롤 할 수있게하려면 특정 높이를 붙여야합니다.

나는 .a을 스크롤 할 수 있고 .c 인 예제를 만들었습니다. .a에서 너무 멀리 아래로 스크롤하지 않으면 .b이 맨 위에 머물러 있습니다.

.a에서 아래로 스크롤해도 .b이 표시되게하려면 position:fixed으로 직관적이지 않은 위치 지정을해야합니다. 당신이 상상하는 레이아웃 어떤 종류의

JSFiddle example

<style media="screen"> 
    .a{ 
     height: 200px; 
     overflow-y: scroll; 
     border: 1px solid black; 
    } 
    .b { 
     margin: 10px; 
     border: 1px solid blue; 
    } 
    .c { 
     height: 150px; 
     overflow-y: scroll; 
     background: #ddd; 
    } 
</style> 
<div class='a'> 
     <div class='b'> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
     </div> 

     <div class='c'> 
      eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br> consequat. Duis aute irure dolor in<br> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
     <div class='d'> 
      eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br> consequat. Duis aute irure dolor in<br> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
</div>