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 stackoverflow.com/a/24851060/1499877). Then on mousedown you can set this interval, and on mouseup you can clear the interval (like stackoverflow.com/q/5978519/1499877). — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented May 19, 2021 at 17:29
Does this answer your question? Click and Hold event listener with Javascript — ulou
– ulou, Commented May 19, 2021 at 18:07

ulou · Accepted Answer · 2021-05-19 18:18:25Z

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>

edited May 19, 2021 at 18:18

ulou

5,9326 gold badges40 silver badges51 bronze badges

answered May 19, 2021 at 18:03

StevenXXCCC

2881 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ulou Over a year ago

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.

matigcba Over a year ago

Yes you're right, I add + pos.innerHTML and everything works, many thanks to both of you :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related