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 class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
</div>

<div class="column infinity">
    <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>

CSS

::-webkit-scrollbar {
    display: none;
}

.item {
    font-size: 48px;
    color: #FFFFFF;
    text-align:  center;
    height: 250px;
    background-color: gray;
    margin-bottom: 10px;
}

.column {
    width: 250px;
    height: 400px;
    overflow: scroll;
    float: left;
    margin-right: 10px;
}

.main .item {
    height: 200px;
}
.main .item:first-child {
    margin-top: 10px;
}
.main{
  background-color: #00BFFF;
}

.infinity .item {
    height: 600px;
}
.infinity{
  background-color: #FF69B4;
}

JavaScript

var parent = $('.infinity');
var max = parent[0].scrollHeight - parent[0].offsetHeight - 20;
var itemParent = $(">", parent);
var main = $('.main');
var maxMain = main[0].scrollHeight - main[0].offsetHeight-20;

parent.on('scroll', function(event) {
    var s = $(this).scrollTop(),
        f = $('>:first', parent),l = $('>:last', parent);
   if(s > max ) {f.appendTo(parent); parent.scrollTop(s - f.height())} ;
   if(s < 5 ) {l.prependTo(parent);parent.scrollTop(s + l.height()) };
}).scrollTop(10).scrollTop(0);

main.on('scroll', function(event) {
    var s = Math.floor(max * main.scrollTop()/maxMain) ;
    itemParent.appendTo(parent);
    parent.scrollTop(s) ;
});