实现向下滚动 - 按住按钮向上滚动按钮

Question

我有两张图片，每张图片都代表一个用于在网站上向上或向下滚动的按钮。 我附上两张图片：

我用以下代码添加了图像：

 <img src="https://certifiedgoldexchange.com/wp-content/uploads/2021/05/btn-scroll-down.png" alt="scroll" id="btn-scroll-down">
 <img src="https://certifiedgoldexchange.com/wp-content/uploads/2021/05/btn-scroll-up.png" alt="scroll" id="btn-scroll-up">

我用于滚动的 javascript 代码如下：

var scrollup = document.getElementById("btn-scroll-up");
var scrolldown = document.getElementById("btn-scroll-down");
scrollup.addEventListener("mousedown", function(){  window.scrollBy(0, -100);})
scrolldown.addEventListener("mousedown", function(){  window.scrollBy(0, 100);})

一切正常，但我希望通过按住它们也能正常工作，我该如何解决？感谢您的帮助。

Answer 1

您需要在鼠标向下和向上添加EventListener。然后在鼠标按下且未释放时有一个间隔计时器。并且，如果鼠标松开，则清除间隔。

我添加了一个 pos html 元素来显示哪个图像被点击并保持（因为我没有你所有的 HTML 和 CSS 代码），但是你可以修改 window.scrollBy 方法让它滚动页面。

var pos = document.getElementById("pos");
var number = pos.innerHTML;
var timeOut = 0;

var scrollFun = function(e) {
  if (e.type == "mousedown") {
    timeOut = setInterval(function() {
      if (e.target.id == "btn-scroll-up")
        number -= 100;
      else number += 100
      pos.innerHTML = number;
      window.scrollBy(0, -100);
    }, 100);
  }

  if (e.type == "mouseup") {
    clearInterval(timeOut);
  }
};

document.getElementById("btn-scroll-down").addEventListener("mousedown", scrollFun, false)
document.getElementById("btn-scroll-down").addEventListener("mouseup", scrollFun, false)

document.getElementById("btn-scroll-up").addEventListener("mousedown", scrollFun, false)
document.getElementById("btn-scroll-up").addEventListener("mouseup", scrollFun, false)

<img src="https://certifiedgoldexchange.com/wp-content/uploads/2021/05/btn-scroll-down.png" alt="scroll" id="btn-scroll-down">
<img src="https://certifiedgoldexchange.com/wp-content/uploads/2021/05/btn-scroll-up.png" alt="scroll" id="btn-scroll-up">

<p>
  pos <span id="pos">0</span>
</p>