infinite scrolling in both ways within div - infinite-loop

Question

i'm making a website with 3 div columns that have overflow: scroll. (see screensho there: https://dl.dropboxusercontent.com/u/13769038/Schermafbeelding%202015-05-04%20om%2017.37.40kopie.jpg)
I want to make the image scrolling divs infinite as in: they should loop. The end of the div should be connected with the beginning of the div seamless.
I found this fiddle: http://jsfiddle.net/2L23c/
this is exactly what i want to do, but it wont work in my html. I think it is using the body to scroll and not a individual div, and since my body is height: 100% it will not scroll properly.
any way to make this work? here's the JS from the fiddle:
(function($){
$(document).ready(function(){
var html = $(".what").html();
var what = '<div class="what">'+html+'</div>';
$(window).scrollTop(1);
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(".what").last().after(what);
if ($(".what").length > 2) {
$(".what").last().prev().remove();
$(window).scrollTop($(window).scrollTop() - $(".what").first().height());
}
}
else if ( $(window).scrollTop() == 0 ) {
$(".what").first().before(what);
$(window).scrollTop($(".what").first().height());
if ($(".what").length > 2) {
$(".what").last().remove();
}
}
});
});
})( jQuery );
html
<div class="what">
<img src="http://1.bp.blogspot.com/_27Ai9FzK4gE/SQzMV9lH2jI/AAAAAAAAAYU/zY9yp_HpCx8/s400/brick_wall.jpg"/>
<img src="http://4.bp.blogspot.com/-5Olo8-EgrZI/TZBqclcfPqI/AAAAAAAAC5c/920EyWecwiU/s640/background_brick_wall.jpg"/>
<img src="http://www.macrobusiness.com.au/wp-content/uploads/2012/12/Brick-Wall-With-Lights-stock4221-large.png"/>
<img src="http://parktownprawn.com/wp-content/uploads/2013/04/brick-stone-wall-grey.jpg"/>
CSS
div.what{
width:400px;
margin: 0 auto;
}
IMG{
max-width:400px;
}
Mathieu