JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

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 gfssfg dfssdf
    sdfsfdds dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg</div>
    </div>

CSS

.textBox {
    background: red;
    width: 100px;
    height: 200px;
    overflow: auto;
    float:left;
}
#container {
    float:left;
}

JavaScript

$(document).ready(function () {

    $(".textBox").scrollTop(150);

    var scrollPosTBox1 = $("#textBox1").scrollTop();
    var scrollPosTBox2 = $("#textBox2").scrollTop();
    var scrollPosTBox3 = $("#textBox3").scrollTop();

    var activeScroll = '';

    $("#textBox1").on('mousedown focus mouseenter', function () {
        activeScroll = 'scroll1';
    }).scroll(function () {
        console.log("scroll 1");
        if (activeScroll == 'scroll1') {
            var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
            var half_offset = offset / 2.0;

            $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
            $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
        }
    });

    $("#textBox2").on('mousedown focus mouseenter', function () {
        activeScroll = 'scroll2';
    }).scroll(function () {
        if (activeScroll == 'scroll2') {
            console.log("scroll 2");
            var offset = $("#textBox2").scrollTop() - scrollPosTBox2;
            var half_offset = offset / 2.0;

            $("#textBox1").scrollTop(scrollPosTBox1 - half_offset);
            $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
        }
    });

    $("#textBox3").on('mousedown focus mouseenter', function () {
        activeScroll = 'scroll3';
    }).scroll(function () {
        if (activeScroll == 'scroll3') {
            console.log("scroll 3");
            var offset = $("#textBox3").scrollTop() - scrollPosTBox3;
            var half_offset = offset / 2.0;

            $("#textBox1").scrollTop(scrollPosTBox1 - half_offset)
            $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        }
    });

});