使用JavaScript实现连续滚动页面

Question

我正在尝试重复一个自动滚动到页面底部的动画。当它达到底部时，我希望它再滚动到顶部。然后，一直重复这个过程。然而，我甚至无法执行第一个回调函数。非常感谢任何帮助。

代码:

pageScroll(pageScrollUp);





function pageScroll(callback) {
    window.scrollBy(0,1); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds

    callback(pageScroll);

}


function pageScrollUp(callback) {

    window.scrollBy(0,-1); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds

    callback(pageScrollUp);

}

感谢您，Josh。

- Josh

Answer 1

这应该可以做到： http://jsfiddle.net/John_C/8ZfKr/

var scrollDirection = 1;
function pageScroll() {
    window.scrollBy(0,scrollDirection); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',50); // scrolls every 50 milliseconds
    if ( (window.scrollY === 0) || (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        scrollDirection = -1*scrollDirection;
    }
}
pageScroll();

- John_C

---

工作得非常完美！有没有一种简单的方法在顶部和底部暂停？ - Josh

在if语句内，您可以清除scrolldelay超时并在延迟后重新启动它。 - John_C

scrollDelay = 0; setTimeout(scrollDelay = 50,1250); 滚动延迟 = 0; setTimeout(滚动延迟 = 50,1250); - Josh

虽然这在你的示例中显然有效，但对我来说它只能滚动得更快，而不能暂停。我会继续尝试。谢谢你的帮助。 - Josh

其中一个评论有点不对。它应该说每50毫秒滚动1像素，而不是每100毫秒。 - Jarom