JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="column infinity one">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>			
</div>
<div class="column infinity two">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>			
</div>

CSS

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

.item {
    font-size: 48px;
    text-align:  center;
    height: 60px;
    background-color: white;
    /* margin-bottom: 10px; */
		background-position: 50% 50%;
		background-repeat: repeat-y;
		background-size: cover;
}

html, body, .column {
    height: 100%;
}

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

.one .item {
		background-image:url("http://ecx.images-amazon.com/images/I/31-X-et%2BGgL.jpg");
}

.two .item {
		background-image:url("http://www.cprw.com/wp-content/uploads/2011/09/A.jpg");
}

JavaScript

var parent = $('.infinity');
var max = parent[0].scrollHeight - parent[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(5);

var position = 50;
parent.on('scroll', function() {
	//position = parent.scrollTop() * 300 / parent.height();
	position = position - 1;
	if (position <= 0) position = 0;
	
	$('.item').css('background-position', '50% ' + position + '%');
});

parent.on('scroll', function() {
	position = parent.scrollTop();
	parent.not(this).scrollTop(position);
});