ponyspy,
прокрутка левой колонки сихронизирована с правой , в правой бесконечная прокрутка.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by ponyspy</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
::-webkit-scrollbar {
display: none;
}
.item {
font-size: 48px;
color: #FFFFFF;
text-align: center;
height: 250px;
background-color: gray;
margin-bottom: 10px;
}
.column {
width: 250px;
height: 400px;
overflow: scroll;
float: left;
margin-right: 10px;
}
.main .item {
height: 200px;
}
.main .item:first-child {
margin-top: 10px;
}
.main{
background-color: #00BFFF;
}
.infinity .item {
height: 600px;
}
.infinity{
background-color: #FF69B4;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
var parent = $('.infinity');
var max = parent[0].scrollHeight - parent[0].offsetHeight - 20;
var itemParent = $(">", parent);
var main = $('.main');
var maxMain = main[0].scrollHeight - main[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(10).scrollTop(0);
main.on('scroll', function(event) {
var s = Math.floor(max * main.scrollTop()/maxMain) ;
itemParent.appendTo(parent);
parent.scrollTop(s) ;
});
});
</script>
</head>
<body>
<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>
</body>
</html>