首页 > 解决方案 > 切换/暂停 JavaScript 滚动功能

问题描述

我有一个功能可以以设定的速度无限向下滚动页面并允许用户自己滚动:

function pageScroll() {
  window.scrollBy(0, 1);
  scrolldelay = setTimeout(pageScroll, 90);
}

我需要的是一种打开和关闭此操作的方法。我已经尝试了下面的代码,但它似乎没有工作。也许我不太了解该scrollBy();功能(?)但是,有了这个,我真的认为我可以调用pageScroll(true)来启动和pageScroll(false)停止滚动。我哪里错了?

function pageScroll(x) {
  if(x == true) {
    window.scrollBy(0, 1);
    scrolldelay = setTimeout(pageScroll, 90);
  } else if(x == false) {
    window.scrollBy(0, 0);
  }
}

只是说,也许有一种使用 jQuery 的方法,scrollTop()但我也希望允许用户自行滚动,如果scrollTop()您尝试向上滚动页面,则会出现非常错误的情况。

标签: javascriptjqueryhtmldom

解决方案


这只是将我的评论转变为更详细的答案。

所以你在做什么看起来大多是正确的。基本上看起来你想要的是某种变量跟踪页面是否应该滚动,以及在某些事件上切换滚动。这是一个简单的示例,说明它的外观:

var shouldScroll = true;

function scroll() {
  if (!shouldScroll) {
    return;
  }
  window.scrollBy(0, 1);
  setTimeout(scroll, 90);
}

scroll();

document.getElementById('buttonId').addEventListener('click', function() {
  shouldScroll = !shouldScroll;
  scroll();
});

假设您有一个带有 id 的按钮buttonId,但除此之外,它实际上只是翻转变量并确保每次单击页面时页面都在滚动。


推荐阅读