无限垂直滚动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/