JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="column main">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>  
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>  
        <div class="item">11</div>
        <div class="item">12</div>         
</div>

<div class="column infinite">
    <div class="outer">
        <div class="item">1 1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>  
        <div class="item">7</div>
        <div class="item">8</div>      
    </div>  
</div>

CSS

.column {
    width: 150px;
    height: 500px;
    overflow: scroll;
    float: left;
}

.item {
    width: 150px;
    background-color: gray;
    margin-bottom: 10px;
}

.main .item {
  height: 150px; 
}

.infinite .item {
  height: 250px;
}

JavaScript

var flag = false;

$('.main').on('scroll', function() {
    $('.infinite').scrollTop($(this).scrollTop() * 2);
});