JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<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>

CSS

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

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

JavaScript

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