我正试图让一长页的图像无限上下滚动(用于展览)。
这就是我一直在使用的代码(我在这里找到的代码非常有用!):https://jsfiddle.net/p7r73tke/
它基本上可以满足我的需求,但我需要更多的速度和暂停控制。
如何延长顶部的暂停时间
有没有办法让它随机暂停约1秒
有人知道一种更简单的方法来做我想做的事情吗?也许正如samuel-liew所建议的那样,javascript并不是解决问题的最佳方案
谢谢你谢谢你!
function scrollpage() {
function f() {
window.scrollTo(0, i); //idk
if (status == 0) {
i = i + 50; //scroll speed top to bottom?
if (i >= Height) {
status = 30; //idk?
}
} else {
i = i - 10; //scroll speed bottom to top?
if (i <= 1) { // if you don't want continue scroll then remove this if condition
status = 0; //idk
}
}
setTimeout(f, 0.01); //idk
}
f();
}
var Height = 15000; //doc height input manually
var i = 1, //idk
j = Height,
status = 0; //idk
scrollpage();
(正如你在评论中看到的,我是JavaScript新手,对JavaScript很敏感)
谢谢你的帮助!
jQuery解决方案:
var speed = 10000; // 10000 = 10 seconds
var doScroll = function() {
var direction = $(window).scrollTop() != 0 ? 0 : $(document).height() - $(window).height();
$('html, body').animate({ scrollTop: direction }, speed, 'linear');
}
doScroll(); // once on page load
setInterval(doScroll, speed + 10); // once every X ms
演示:http://jsfiddle.net/samliew/k35tbgau/
JavaScript:
对不起,我不建议使用纯JavaScript,因为你必须考虑:
- 获取窗口高度、文档高度和当前滚动位置的跨浏览器问题
- 每次调整浏览器大小时根据内容高度重新计算滚动速度
- 编程动画功能
- 跟踪间隔和超时,以及何时需要清除它们
- 滚动方向/状态
考虑用户是否手动滚动滚动滚动条
可能更多