javascript - 网页滚动时滚动固定位置div(overflow y)

Question

我需要一些简单的解决方案来解决如何滚动固定位置和固定高度的 div 并将页面滚动到其高度。 我阅读了很多解决方案，但它们无法解决我的问题。

我有一个分为 3 列(左、中、右)的页面。左右div是固定位置，中间div使用ajax显示消息。右侧 div 有一些高度列表 500px，它会滚动直到到达底部。

但我想在页面滚动时同时滚动中间和右侧的 div。

演示代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div>
<div class="col=lg-12" style="display:flex">
    <div class="col-lg-3" style="position:fixed;float:left;left:0">some text</div>
    <div class="col-lg-6" id="displayPost" style="float:left;left:0;right:0;text-align:center">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
    <div class="col-lg-3" style="position:fixed;height:100px;overflow-y:auto;float:right;right:0">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
 </div>

我想同时滚动两个 div。现在，仅当光标位于左侧 div 上时，左侧 div 才会滚动。

如果需要任何进一步的信息，请告诉我，我会在此处发布。

Answer 1

我想这对你有帮助..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div>
<div class="col-lg-12 col-md-12 col-sm-12 ">
    <div class="col-lg-3 col-md-3 col-sm-3 left" style="max-height: 100px;">some text</div>
    <div class="col-lg-6 col-md-6 col-sm-6 center" id="displayPost" style="max-height: 200px;overflow: auto !important;">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
    <div class="col-lg-3 col-md-3 col-sm-3 right" style="max-height: 100px;overflow: auto !important;">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
 </div>

如果没有，请告诉我..!!