JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="textBox1" class="textBox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
dsfsdf
sdf
sdfs
fsdf
asdf
sdaf
dsaf
as
fdf
dfsa
dsfsdf
dfssdf
sdfsfdds
dsfdfsa
fdsasdf
eewrrwe
fdgsgfs
sdfggsdf
tererret
sgfdgfd
gfssfg
dfssdf
sdfsfdds
dsfdfsa
fdsasdf
eewrrwe
fdgsgfs
sdfggsdf
tererret
sgfdgfd
gfssfg
</div>
<div id="textBox2" class="textBox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
dsfsdf
sdf
sdfs
fsdf
asdf
sdaf
dsaf
as
fdf
dfsa
dsfsdf
dfssdf
sdfsfdds
dsfdfsa
fdsasdf
eewrrwe
fdgsgfs
sdfggsdf
tererret
sgfdgfd
gfssfg
dfssdf
sdfsfdds
dsfdfsa
fdsasdf
eewrrwe
fdgsgfs
sdfggsdf
tererret
sgfdgfd
gfssfg
</div>
<div id="textBox3" class="textBox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
dsfsdf
sdf
sdfs
fsdf
asdf
sdaf
dsaf
as
fdf
dfsa
dsfsdf
dfssdf
sdfsfdds
dsfdfsa
fdsasdf
eewrrwe
fdgsgfs
sdfggsdf
tererret
sgfdgfd
...
CSS
.textBox {
background: red;
width: 100px;
height: 200px;
overflow: auto;
float:left;
}
#container {
float:left;
}
JavaScript
$(document).ready( function() {
$("#textBox1").scrollTop(150);
$("#textBox2").scrollTop(150);
$("#textBox3").scrollTop(150);
var scrollPosTBox1 = $("#textBox1").scrollTop();
var scrollPosTBox2 = $("#textBox2").scrollTop();
var scrollPosTBox3 = $("#textBox3").scrollTop();
var disable1 = false;
var disable2 = false;
var disable3 = false;
$("#textBox1").scroll(function () {
console.log("scroll 1");
var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
var half_offset = offset/2.0;
disable1 = true;
if(disable2 == false) {
$("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
}
if(disable3 == false) {
$("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
}
disable1 = false;
});
$("#textBox2").scroll(function () {
/*
console.log("scroll 2");
var offset = $("#textBox2").scrollTop() - scrollPosTBox2;
var half_offset = offset/2.0;
disable2 = true;
if(disable1 == false) {
$("#textBox1").scrollTop(scrollPosTBox1 - half_offset);
}
if(disable3 == false) {
$("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
}
disable2 = false;
*/
});
$("#textBox3").scroll(function () {
/*
console.log("scroll 3");
var offset = $("#textBox3").scrollTop() - scrollPosTBox3;
var half_offset = offset/2.0;
disable3 = true;
if(disable1 == false) {
$("#textBox1").scrollTop(scrollPosTBox1 - half_offset)
}
if(disable2 == false) {
$("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
}
disable3 = false;
*/
});
/*
$(".textBox").scroll(function () {
console.log("scroll");
...