ponyspy,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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 {
height: 400px;
overflow: scroll;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var parent = $('.column'), 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)
}); </script>
</head>
<body>
<div class="column">
<div class="outer">
<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>
<div class="outer">
<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>
</div>
</body>
</html>