JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="res"></div>
<div class="outer">
    <div class="column one">
        <div class="column_inner">
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>
            <div class="cub"></div>                 
        </div>     
    </div>
    <div class="column two">
        <div class="column_inner">
            <div class="cub2"></div>
            <div class="cub2"></div>
            <div class="cub2"></div>
            <div class="cub2"></div>               
        </div>   
    </div>
</div>

CSS

html, body, .outer, .column {
    height: 100%;
}

.outer {
    width: 400px;    
    outline: 1px solid red;    
}

.column {
    width: 200px;
    outline: 1px solid blue;
    float: left;
    overflow: scroll;
}

.cub {
    width: 200px;
    height: 100px;
    margin-bottom: 30px;
    background-color: green;
}

.cub:last-child, .cub2:last-child {
    margin-bottom: 0px;
}

.cub2 {
    width: 200px;
    height: 300px;
    background-color: grey;
    margin-bottom: 5px;
}

JavaScript

$('.one').on('scroll', function(event) {
    var height1 = $(this).height();
    var height1_inner = $(this).children('.column_inner').height();
    var scroll_percentage = 100 * $(this).scrollTop() /  (height1_inner - height1);
    
    var height2 = $('.two').height();
    var height2_inner = $('.two').children('.column_inner').height();
    $('.two').scrollTop((height2_inner - height2) * scroll_percentage / 100)
});