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

这样的事情？

var letterZcount = $(".letter{blah}").length;

if($letter{blah}count.length < 3)
    $(this).addClass('disabled');

$(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，以便在实际进行滚动的div之上创建标题.scroller。然后我添加了一个与滚动条高度相同的隐形容器，其内容与滚动条内的内容高度相同。 JavaScript确保当您滚动不可见的div时，position: absolute div与运动匹配。

如何为两个不同容器中的两个相邻div创建一个公共垂直滚动条

1 个答案: