JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

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

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

.item {
    height: 250px;
    background-color: gray;
    margin-bottom: 10px;
}

.column {
    height: 400px;
    overflow: scroll;
}

JavaScript

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