2012-08-28 45 views
4

任何人都可以提出一个简单的jQuery垂直自动滚动脚本吗?一个不膨胀,我只需要它自动启动,并在一个div中滚动6个或更多li。我试过jquery.autoscroll.js,但无法让它自动启动。jQuery自动在div中垂直滚动

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

回答

14
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); 
} 
+2

当打到底,它会尝试滚动,滚动,滚动,滚动 –

+2

@FlashThunder:目前已经有上SO检查很多答案。检查'scrollTop'是否已达到容器高度并使用'clearInterval'。大不了。这如何保证投票?建议一个解决方案,而不仅仅是问题。先做一些搜索。 –

+0

[要检查div是否滚动到底部/底部](http://bit.ly/17nEh7d) –

1

罗宾的回答对我来说并不完全是诀窍,有几个原因,所以这里是他的方法的修改和扩展版本:

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); 

与匿名user1248475这里帮助:

Detect whether scroll event was created by user

和这样的回答:

https://stackoverflow.com/a/9392134

希望这有助于任何人都希望解决如何自动滚动的问题与jQuery的div和当用户手动滚动时停止。

0

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

我已经在下面的链接上做了一个工作演示,如果你喜欢,你可以复制它。

autoscroll.js at github

my working autoscroll demo