實現向下滾動 - 通過按住單擊向上滾動按鈕

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 添加到鼠標向下和向上。 然后在鼠標按下且未釋放時有一個間隔計時器。 並且，如果釋放鼠標，則清除間隔。

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>