无限自动上下滚动，如何控制/配置速度，结束时的暂停时间

Infinite auto scroll top-to-bottom and back, how to control/configure speed, time of pause at end?

本文关键字：结束 速度 配置 时间 暂停 上下 滚动 无限 何控制 控制      更新时间：2023-09-26

我正试图让一长页的图像无限上下滚动（用于展览）。

这就是我一直在使用的代码（我在这里找到的代码非常有用！）：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，因为你必须考虑：

  1. 获取窗口高度、文档高度和当前滚动位置的跨浏览器问题
  2. 每次调整浏览器大小时根据内容高度重新计算滚动速度
  3. 编程动画功能
  4. 跟踪间隔和超时，以及何时需要清除它们
  5. 滚动方向/状态

  6. 考虑用户是否手动滚动滚动滚动条

    可能更多

相关文章：