jQuery infinite scroll with repeating content

I recently needed to clone content to give the illusion of infinite repeating content. I couldn’t find a plugin for it so I imlemented it like this:

HTML:

<div class="infinite-scroll">
    <div class="scroll-item" data-scroll-counter="0"><!-- ... --></div>
	<div class="scroll-item" data-scroll-counter="1"><!-- ... --></div>
    <div class="scroll-item" data-scroll-counter="2"><!-- ... --></div>
</div>

CSS:

div.infinite-scroll { 
	
    overflow: auto;
    height: 100vh;

}

JavaScript:

$('div.infinite-scroll').each(function() {
    
    var $el = $(this);
    
    var scrollIndex = 0;
    
    $el.on('scroll', function() {
        
        var maxScroll        = this.scrollHeight - this.clientHeight;
        var currentScroll     = this.scrollTop;
        var bottom             = 100;
        
        if (currentScroll + bottom >= maxScroll) {
            
            var $clone = $el.find('div.scroll-item')
                            .eq(scrollIndex);
                            
            if ($clone.length === 0) {
                
                scrollIndex = 0;
                
                $clone = $el.find('div.scroll-item')
                            .eq(scrollIndex);
                
            }
            
            $el.append($clone.html());
            
            scrollIndex ++;
        
        }
    
    });

});