如何实现按住点击可连续触发的页面上下滚动按钮功能

实现方案 #

核心逻辑是通过定时器在鼠标按住时重复触发滚动动作，鼠标松开/离开按钮时停止定时器，可直接用以下代码替换你现有的JS代码：

const scrollup = document.getElementById("btn-scroll-up");
const scrolldown = document.getElementById("btn-scroll-down");
// 存储定时器实例
let scrollTimer = null;
// 滚动参数配置，可根据需求调整
const scrollSetting = {
  triggerInterval: 50, // 滚动触发间隔，单位毫秒，数值越小滚动速度越快
  scrollStep: 30 // 每次滚动的像素值，数值越大滚动幅度越大
};

// 向上滚动事件
scrollup.addEventListener("mousedown", () => {
  // 先清空已有定时器，避免重复触发
  clearInterval(scrollTimer);
  scrollTimer = setInterval(() => {
    window.scrollBy(0, -scrollSetting.scrollStep);
  }, scrollSetting.triggerInterval);
});

// 向下滚动事件
scrolldown.addEventListener("mousedown", () => {
  clearInterval(scrollTimer);
  scrollTimer = setInterval(() => {
    window.scrollBy(0, scrollSetting.scrollStep);
  }, scrollSetting.triggerInterval);
});

// 停止滚动事件：鼠标松开/移出按钮时触发
const stopScroll = () => clearInterval(scrollTimer);
scrollup.addEventListener("mouseup", stopScroll);
scrollup.addEventListener("mouseleave", stopScroll);
scrolldown.addEventListener("mouseup", stopScroll);
scrolldown.addEventListener("mouseleave", stopScroll);

如果需要更丝滑的滚动效果，可以将setInterval替换为requestAnimationFrame实现，性能表现更好，不会有掉帧卡顿的问题。

内容的提问来源于stack exchange，提问作者matigcba