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 class="outer">
        <div class="item">1 2</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);
});

$('.infinite').on('scroll', function() {
    if (!flag && $(this).scrollTop() >= $('.outer:first').offset().top - $(this).offset().top) {
        $('.outer:first').clone().insertAfter($('.outer:last'));
        flag = true;
    } else if (flag && $(this).scrollTop() >= $('.outer:last').offset().top - $(this).offset().top) {
        $('.outer:first').remove();
        flag = false;
    }
});