Implement scroll down - scroll up buttons by holding down click on them

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.

You could use `setInterval` to trigger the scroll every x milliseconds (like https://stackoverflow.com/a/24851060/1499877). Then on `mousedown` you can set this interval, and on `mouseup` you can clear the interval (like https://stackoverflow.com/q/5978519/1499877). — WOUNDEDStevenJones, May 19 '21 at 17:29
Does this answer your question? [Click and Hold event listener with Javascript](https://stackoverflow.com/questions/40573922/click-and-hold-event-listener-with-javascript) — ulou, May 19 '21 at 18:07

score 1 · Accepted Answer · edited May 19 '21 at 18:18

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>

You forgot to cast initial number and it's treat as a text. Should've been `var number = +pos.innerHTML;`. It's also doesn't clear events on `mouseLeave`, so if you will hold mouse down and leave it from img scrolling is not stopping, you can even trigger both events in same time. — ulou, May 19 '21 at 18:17
Yes you're right, I add + pos.innerHTML and everything works, many thanks to both of you :) — matigcba, May 19 '21 at 18:29

Implement scroll down - scroll up buttons by holding down click on them

1 Answers1