文本块上延迟的自动滚动效果

Delayed autoscroll effect on a block of text

本文关键字:滚动 延迟 文本      更新时间:2023-09-26

我对JS相当陌生…请温柔一点。

谁能建议一种方法来实现延迟自动滚动效果的文本块?

值得一提的是,我的最终目标是在iOS设备上的弹出式模态窗口上使用它。因为iOS浏览器在用户交互之前不会显示滚动条,所以我使用了自动滚动。

实际上:我希望页面加载,等待几秒钟,然后开始慢慢向下滚动。滚动的目的是提示用户有更多的内容可用,因此,如果有任何方法可以停止或暂时暂停用户交互时的自动滚动-这将是最佳的。

我已经搜索了我的答案几个小时了,但是不能将找到的代码初始化到我的设计中(再一次,我是相当绿色的),也不能找到一个解决方案来实现我所需要的一切——我的头脑变得更聪明了。

我已经设置了一个小提琴与我的HTML和CSS: http://jsfiddle.net/zfMsQ/

任何帮助都非常感谢!

ps:这是我在StackOverflow上的第一篇文章:)

我的代码:
Extensive. Linked above. 

给你:http://jsfiddle.net/zfMsQ/3/

var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
    text.scrollTop(text.scrollTop() + 1)
    var top = text.scrollTop()
    if (top > max) {
        max = top
        if (roll) {
            setTimeout(scroll, 50)
        }
    }
}
text.on("mouseenter mouseover mousedown", function(){
 roll = false;   
})
setTimeout(scroll, 2000)