jQuery 在 div 中自动垂直滚动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12164263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery auto scroll vertically in a div
提问by acctman
Can anyone suggest a good simple jQuery vertical autoscroller script? one that's not bloat, I just need for it to auto start and scroll 6 or more li
in a div. i tried the jquery.autoscroll.jsbut couldn't get it to auto start.
谁能推荐一个简单的jQuery垂直自动滚动脚本?一个不膨胀的,我只需要它自动启动并li
在一个 div 中滚动 6 个或更多。我尝试了jquery.autoscroll.js但无法让它自动启动。
$.fn.autoscroll.defaults = {
start: {
step: 50,
scroll: true,
direction: "down",
pauseOnHover: true
},
delay: 5000,
ffrw: {
speed: "fast",
step: 100
}
};
回答by Robin Maben
var div = $('div.autoscrolling');
var scroller = setInterval(function(){
var pos = div.scrollTop();
div.scrollTop(++pos);
}, 100)?
工作演示。
EDIT:
编辑:
To stop scrolling when the div has scrolled to the bottom add the following check at the end of the above function() {}
-
要在 div 滚动到底部时停止滚动,请在上述末尾添加以下检查function() {}
-
if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight)
clearInterval(scroller);
}
回答by Nerdroid
simplyScroll is a cool plugin http://logicbox.net/jquery/simplyscroll/
simpleScroll 是一个很酷的插件http://logicbox.net/jquery/simplyscroll/
回答by Josh Burson
Robin's answer didn't quite do the trick for me, for several reasons, so here's a modified and extended version of his approach:
出于多种原因,Robin 的回答对我来说并没有完全奏效,因此这是他的方法的修改和扩展版本:
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);
with help from anonymous user1248475 here:
在匿名用户 1248475 的帮助下:
Detect whether scroll event was created by user
and this answer:
和这个答案:
https://stackoverflow.com/a/9392134
https://stackoverflow.com/a/9392134
Hope that's helpful for anyone looking to solve the issue of how to auto scroll a div with jquery and stop when user scrolls manually.
希望这对希望解决如何使用 jquery 自动滚动 div 并在用户手动滚动时停止的问题的任何人都有帮助。
回答by Shawn
The autoscroll.js download at github has the wrong files in the download. If you search there, you can find them.
github 上的 autoscroll.js 下载文件中包含错误的文件。如果你在那里搜索,你可以找到它们。
I've made a working demo at the link below, which you can copy from if you like.
我在下面的链接中制作了一个工作演示,如果您愿意,可以从中复制。