JSFiddle - React, Tailwind, and code Playground

by Svetlana

HTML

<div id="left">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>
<div id="right">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS

* {
    overflow: auto;
}
#left {
    width: 200px;
    height: 100px;
    background-color: red;
}
#right {
    width: 200px;
    height: 100px;
    background-color: blue;
}

JavaScript

$left = $("#left")
$right = $("#right")

// Use a simple sentinel to say we are busy handling an event
var scrolling = false;
var timer;
$left.scroll(function () {
    //console.log("left "  + $left.scrollTop() + " : " + $.now());
    if (!scrolling) {Scrolling
        //console.log("SCROLLING LEFT");
        clearTimeout(timer);
        timer = setTimeout(function () {
            scrolling = true;
            $right.scrollTop($left.scrollTop());
            scrolling = false;
        }, 10);
    }
});

$right.scroll(function () {
    //console.log("Right " + $right.scrollTop() + " : " + $.now());
    if (!scrolling) {
        clearTimeout(timer);
        timer = setTimeout(function () {
            //console.log("SCROLLING RIGHT");
            scrolling = true;
            $left.scrollTop($right.scrollTop());
            scrolling = false;
        }, 10);
    }
});