두 개의 서로 다른 컨테이너에서 두 개의 인접한 div에 대한 공통 수직 스크롤 막대를 만드는 방법

Question

아래에서 설명하는 구조에 대한 수직 스크롤 막대를 만들어야합니다.

• resultLeft/resultRight에서 스크롤하는 동안 headerLeft 및 headerRight가 고정되어야합니다.

• 스크롤 막대가 resultRight Div와 함께 있어야하며 resultLeft Div와 동기화되어야합니다.

  <div class="mainContainer"> 
      <div class="leftContainer"> 
      <div class="headerLeft"></div> 
      <div class="resultLeft" style="height:200px;"> 
        <p></p> 
        <p></p> 
        <p></p> 
      </div> 
      </div> 
      <div class="rightContainer"> 
       <div class="headerRight"></div> 
       <div class="resultRight" 
        style="height:200px;overflow-y:auto;"> 
        <p></p> 
        <p></p> 
        <p></p> 
       </div> 
      </div> 
  
  </div> 
  

Answer 1

이런 식으로 뭔가?

$(function() { 
 
    $('.invisible').scroll(function() { 
 
    $('.scroller').scrollTop($('.invisible').scrollTop()); 
 
    }); 
 
});

.mainContainer { 
 
    display: flex; 
 
    height: 80px; 
 
    position: relative; 
 
} 
 

 
.invisible { 
 
    position: absolute; 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    z-index: 1; 
 
} 
 

 
.leftContainer, 
 
.rightContainer, 
 
.invisibleContainer { 
 
    flex-grow: 1; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
.headerLeft, 
 
.headerRight { 
 
    height: 50px; 
 
    width: 100%; 
 
    position: absolute; 
 
    background-color: #aaa; 
 
} 
 
.invisible, .scroller { 
 
    height: 150px; 
 
} 
 
.scroller { 
 
    overflow: hidden; 
 
} 
 
.resultLeft, 
 
.resultRight { 
 
    padding-top: 50px; 
 
} 
 
.resultLeft { 
 
    background-color: #ccc; 
 
} 
 
.resultRight { 
 
    background-color: #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainContainer"> 
 
    <div class="invisible"> 
 
    <div class="invisibleContainer"> 
 

 
    </div> 
 
    </div> 
 
    <div class="leftContainer"> 
 
    <div class="headerLeft">Header Left</div> 
 
    <div class="scroller"> 
 
     <div class="resultLeft" style="height:200px;"> 
 
     <p> 
 
      Scroll 
 
      <br>Scroll 
 
      <br>Scroll 
 
      <br>Scroll 
 
      <br> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="rightContainer"> 
 
    <div class="headerRight">Header Right</div> 
 
    <div class="scroller"> 
 
     <div class="resultRight" style="height:200px;"> 
 
     <p> 
 
      Scroll 
 
      <br>Scroll 
 
      <br>Scroll 
 
      <br>Scroll 
 
      <br> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

나는 실제로 스크롤을하고있는 div의 상단에 헤더 position: absolute을하기 위해, 두 .scroller 된 div를 추가했다. 그런 다음 스크롤러 내부의 내용이 스크롤러 내부의 내용과 같은 높이 인 스크롤러와 같은 높이의 보이지 않는 컨테이너를 추가했습니다. JavaScript를 사용하면 보이지 않는 div를 스크롤 할 때 .scroller div가 해당 동작을 일치시킵니다.