JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<div id="textScroll" style="width:100px; height:100px; overflow:auto;">
    <div id="text">
        Text 1<br />
        Text 2<br />
        Text 3<br />
        Text 4<br />
        Text 5<br />
        Text 6<br />
        Text 7
    </div>
</div>
<div id="photosScroll" style="width:100px; height:100px; overflow:auto;">

    <div id="photos">
        Photos 1<br />
        Photos 1<br />
        Photos 2<br />
        Photos 2<br />
        Photos 3<br />
        Photos 3<br />
        Photos 4<br />
        Photos 4<br />
        Photos 5<br />
        Photos 5<br />
        Photos 6<br />
        Photos 6<br />
        Photos 7<br />
        Photos 7
    </div>
</div>

JavaScript

$(document).ready(function(){
    $('#textScroll').scroll(function(){
        var textDiff = $('#text').height() - $('#textScroll').height();
        var textDiffRatio = (1 / textDiff) * $('#textScroll').scrollTop();
        var photosDiff = $('#photos').height() - $('#photosScroll').height();
        var photosScrollTop = textDiffRatio * photosDiff;
        $('#photosScroll').scrollTop(photosScrollTop);
    });
});