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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:22:40  来源:igfitidea点击:

jQuery auto scroll vertically in a div

jqueryautoscroll

提问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 liin 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)?

Working Demo.

工作演示

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.

我在下面的链接中制作了一个工作演示,如果您愿意,可以从中复制。

autoscroll.js at github

github 上的 autoscroll.js

my working autoscroll demo

我的工作自动滚动演示