实现向下滚动 - 通过按住单击向上滚动按钮

Question

I have two images, each one of them represents a button to scroll up or down on the site. Here I attach the two images:

I have added the images with the following code:

 <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">

my javascript code for scrolling is the following:

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);})

Everything works fine, but I want it to also work by holding down the click on them, how could I solve it? I appreciate your help.

Answer 1

You need to addEventListener to both mouse down and up. Then have a interval timer when the mouse is down and not released. And, clear the interval if mouse released.

I added a pos html element to show which image is clicked and held (Since I don't have all your HTML and CSS code), but you can modify the window.scrollBy method to have it scroll the page.

 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>