Question

任何人都可以建议一个简单的jQuery垂直自动滚动脚本吗？一个不臃肿的，我只需要它自动启动并在div中滚动6个或更多li。我尝试了 jquery.autoscroll.js 但无法让它自动启动。

$.fn.autoscroll.defaults = { 
   start: { 
      step: 50, 
      scroll: true, 
      direction: "down", 
      pauseOnHover: true 
   }, 
   delay: 5000, 
   ffrw: { 
      speed: "fast", 
      step: 100 
   } 
};

Answer 1

var div = $('div.autoscrolling');
var scroller = setInterval(function(){
    var pos = div.scrollTop();
    div.scrollTop(++pos);
}, 100)

Working Demo

编辑：

要在div滚动到底部时停止滚动，请在上面function() {}的末尾添加以下检查 -

if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight)
   clearInterval(scroller);
}

Answer 2

simplyScroll是一个很酷的插件http://logicbox.net/jquery/simplyscroll/

Answer 3

罗宾的回答对我来说并不是很有用，原因有几个，所以这里是他的方法的修改和扩展版本：

var div = $('.scrollbit');

$('.scrollbit').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {

    }
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
        clearInterval(scrollbit);
    }
    if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
        clearInterval(scrollbit);
    }
});

var scrollbit = setInterval(function(){
    var pos = div.scrollTop();
    if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) {
        clearInterval(scrollbit);
    }
    div.scrollTop(pos + 1);
}, 100);

在匿名用户1248475的帮助下：

Detect whether scroll event was created by user

和这个答案：

https://stackoverflow.com/a/9392134

希望这对于任何想要解决如何使用jquery自动滚动div的问题有用，并在用户手动滚动时停止。

Answer 4

github上的autoscroll.js下载包含错误的文件。如果你在那里搜索，你可以找到它们。

我在下面的链接上做了一个工作演示，如果你愿意，可以复制。

autoscroll.js at github

my working autoscroll demo

jQuery在div中自动垂直滚动

4 个答案: