JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="div1" class="scrollable">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non cum, aliquam iusto. Est quaerat ut repudiandae obcaecati quasi, provident facere quo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit cumque laboriosam quidem architecto debitis reiciendis accusantium itaque non...

CSS

.scrollable {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid black;
    display: inline-block;
}

JavaScript

let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');

// Use a flag to prevent infinite loop
let isSyncingDiv1Scroll = false;
let isSyncingDiv2Scroll = false;

div1.addEventListener('scroll', (e) => {
    if (isSyncingDiv1Scroll) {
        return; // Don't run if it's triggered by the other div
    }
    
    isSyncingDiv2Scroll = true; // Lock the flag for div2
    div2.scrollTop = div1.scrollTop; // Sync position
});

div2.addEventListener('scroll', (e) => {
    if (isSyncingDiv2Scroll) {
        return; // Don't run if it's triggered by the other div
    }

    isSyncingDiv1Scroll = true; // Lock the flag for div1
    div1.scrollTop = div2.scrollTop; // Sync position
});

// Release the flags after the scroll event completes.
// This will make sure the scrolls are in sync even if one of the divs continues scrolling after the other one stops.
div1.addEventListener('scroll', (e) => {
    setTimeout(() => {
        isSyncingDiv2Scroll = false;
    }, 10);
});

div2.addEventListener('scroll', (e) => {
    setTimeout(() => {
        isSyncingDiv1Scroll = false;
    }, 10);
});