jquery Continuous vScroll
by amindunited
HTML
<ul id="target_1" class="clearfix">
<li class="listElm">1</li>
<li class="listElm">2</li>
<li class="listElm">3</li>
<li class="listElm">4</li>
<li class="listElm">5</li>
</ul>
CSS
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#target_1 {
padding:0px;
margin:0px;
height: 66px;
overflow: hidden;
border-radius: 20px;
border: solid 1px #333333;
box-shadow: inset 3px 3px 10px 10px #333333;
list-style:none;
width: 45px;
display:block;
}
#target_1 li {
display: block;
list-style: none;
height: 33px;
line-height: 30px;
width: 45px;
text-align: center;
}
JavaScript
(function ($) {
var options = {
}
var vars = {
}
var methods = {
init:function () {
console.log('init ', $(this), $(this).scrollTop());
///////////
var h = ( $(this).children().last().height() * 3 ) / 2;
if ($(this).scrollTop() <= h) {
console.log("last ", $(this).children().last())
$(this).children().last().insertBefore(
$(this).children().first()
);
$(this).scrollTop(h);
}
//////////
methods.addListeners.apply($(this));
},
destroy: function () {
},
addListeners: function () {
}
}
$.fn.scrollect = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || !method) {
options = $.extend(options, method);
return methods.init.apply(this, arguments);
}
else {
$.error(method + ' does not exist on jQuery.dnd');
}
};
})(jQuery);
$(function(){
$('#target_1').scrollect();
});