I am trying to add dynamically <li> view limit in a div content. I want to show only 3 <li> every time when scroll the div content.
I'm not sure but here is an example : http://bit.ly/1fikqQ8
Like this? http://jsfiddle.net/bennwbpu/1/
$(function(){
var liheight = $(".demo2 li").outerHeight();
$(".demo2").outerHeight(liheight*3);
})
First we gather the outer height of one <li> and we apply thrice of it for the outer height of .demo2
If you want to snap to the top of nearest <li> every time a scroll event occurs, you can try: http://demos.flesler.com/jquery/scrollTo/
Fiddle: http://jsfiddle.net/bennwbpu/7/
Too many lines... but will do. The thing I did to make this solution is a bunch of Googling and putting the pieces together.
Simplified version
$(function(){
var lih = $(".demo2 li").outerHeight(),
lst = 0,
f=0;
$(".demo2").outerHeight(lih*3).scroll(function(e){
var $this = $(this)
,st = $this.scrollTop();
function _scroll(n) {
$this.css("overflow","hidden").stop().animate({scrollTop:lst+(n)*lih*3}, 500, "swing", function(){setTimeout(
function(){
$this.css("overflow","auto");
setTimeout(function(){f=0},50);
},500)
})
}
if (!f) {
f=1;
if (st > lst)
_scroll(1);
else
_scroll(-1);
}
lst = st;
});
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments