Example Endless Scroller
The Endless Scroller is simple, split you content that it fit into two DIVs and you have an endless Scroller.
It is not needed that the two DIVs have the same size or the same content. ;)
For a better unterstanding the first Div has Content "aaaaaaaaAAAAAAAAAA" and the second Div has Content "BBBBBBBbbbbbbbbbb"
Endless left
aaaaaaaaAAAAAAAAAA
BBBBBBBbbbbbbbbbb
Endless right
aaaaaaaaAAAAAAAAAA
BBBBBBBbbbbbbbbbb
Endless up
aaaaaaaaAAAAAAAAAA
BBBBBBBbbbbbbbbbb
Endless down
aaaaaaaaAAAAAAAAAA
BBBBBBBbbbbbbbbbb
Test W3C Validation:
HTML Code
<link rel="stylesheet" type="text/css" href="jscroller2-1.0.css">
<script type="text/javascript" src="jscroller2-1.61.js"></script>
<div id="scroller_container1">
<div class="jscroller2_left jscroller2_speed-10" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">aaaaaaaaAAAAAAAAAA</div>
<div class="jscroller2_left_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">BBBBBBBbbbbbbbbbb</div>
</div>
<div id="scroller_container2">
<div class="jscroller2_right jscroller2_speed-20" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">aaaaaaaaAAAAAAAAAA</div>
<div class="jscroller2_right_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">BBBBBBBbbbbbbbbbb</div>
</div>
<div id="scroller_container3">
<div class="jscroller2_up jscroller2_speed-10" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">aaaaaaaaAAAAAAAAAA</div>
<div class="jscroller2_up_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">BBBBBBBbbbbbbbbbb</div>
</div>
<div id="scroller_container4">
<div class="jscroller2_down jscroller2_speed-20" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">aaaaaaaaAAAAAAAAAA</div>
<div class="jscroller2_down_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">BBBBBBBbbbbbbbbbb</div>
</div>
CSS Code
/* Scroller Box */
#scroller_container1, #scroller_container2, #scroller_container3, #scroller_container4 {
width: 600px;
height: 60px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy {;# }
#scroller_container1, #scroller_container2, #scroller_container3, #scroller_container4 {
overflow: auto;
}
/* Scoller Box */