JSFiddle - React, Tailwind, and code Playground
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;
}
html, body, .column {
height: 100%;
}
.column {
width: 175px;
overflow: scroll;
float: left;
margin-right: 10px;
}
.main .item {
height: 200px;
}
.infinity .item {
height: 600px;
}
JavaScript
var parent = $('.infinity');
var max = parent[0].scrollHeight - parent[0].offsetHeight - 20;
var scroll_position = 0;
var factor = 12.555;
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(5);
$('.main').on('scroll', function(event) {
var scroll = $(this).scrollTop();
if (scroll_position > scroll) {
parent.scrollTop(parent.scrollTop() - factor);
scroll_position = scroll;
} else {
parent.scrollTop(parent.scrollTop() + factor);
scroll_position = scroll;
}
});