Scroll fixed position div(overflow y) as web page scroll

Question

I need some simple solution to how to scroll a fixed position and fixed height div with page scroll to its height. I read many solution but they couldn't solve my problem.

I have a page which divided in 3 cols(left, middle, right). And left and right divs are fixed position and middle div displaying messages using ajax. Right side div have some height list 500px and it will scroll until it reach its bottom.

But I want to scroll both middle and right div when my page scroll.

Demo code:

 <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> 

I want to scroll both div simultaneously. Right now left div scroll only when cursor is on left div.

If any further info required let me know I will post here.

Answer 1

I think this will help you..

 <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> 

If not please let me to know..!!