无限垂直滚动div元素

Question

我有示例到垂直滚动滑块

[样本] ： http://jsfiddle.net/e5dtyLjw/

我想像无限一样做这个样本，当滚动结束时在样本上，它会到顶部我不要它，我想要它像无限

这是我的代码：

var itemCount = 10, activeScroll = 0, countScroll = 0;
setInterval(function() {
    if(countScroll == (itemCount - 6)) {
        activeScroll = 0;
        countScroll = 0;
        $('#list').animate({scrollTop: 0});
    }
    else {
        activeScroll += 40;
        countScroll += 1;
        $('#list').animate({scrollTop: activeScroll});            
    }
}, 1000);

更新：我确实尝试了一些新的东西，我想要它就像那样，但这样。没有效果：/

http://jsfiddle.net/e5dtyLjw/2/

Answer 1

如果我理解正确，这就是你要找的

setInterval(function(){
    $('#list').stop().animate({scrollTop:40},400,'swing',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));
    });
}, 1000);

JSFiddle

如果你

想要那种幻灯片效果，你必须使用 .animate（）

Answer 2

对<li>元素重新排序

jQuery.animate 的第四个参数是完成回调。将动画设置为仅滚动每个项目，并将回调设置为对元素本身重新排序

$element
    .scrollTop(0) // force us back to the top
    .find('span:last') // grab the last element 
    .after($('span:first', this)) // move the first element AFTER the current last element
;

完整解决方案

我更喜欢线性移动，所以我将滚动动画的持续时间 （950） 设置为非常接近超时持续时间 （1000）。这使得整个事情看起来像一个恒定的线性滚动。将滚动设置为 100 以查看我在说什么。

var options = {
    scroll: 950, // duration of scroll animation between each item
    pause: 1000, // time to stop on each item
    height: 40   // outer-height of element (height and padding), should instead be calculated
};
setInterval(function(){
    $('#list').stop().animate({scrollTop:options.height},options.scroll,'linear',function(){
        $(this).scrollTop(0).find('span:last').after($('span:first', this));  // shift the order of the LI elements
    });
}, options.pause);

http://jsfiddle.net/FabioLux/hfa2mu0f/