按住按鈕模擬滾動

Question

我有一個綁定在按鈕“onmousedown”上的函數，它模擬滾動 div。 多次快速單擊並按住太長時間會出現問題。

例如，如果用戶滾動到 div 底部，並快速單擊“向下”按鈕多次，則 div 內的 OL 上下抖動非常快（快於 33ms，這是可能的最快滾動速度）。 我相信它會創建多個計時器對象，每個對象滾動 div 而不清除這些對象？

另一個問題是，如果按鈕被按住太久然后松開，它的作用就像按鈕仍然被按住一樣。 （以 33 毫秒的速率滾動）。 一旦鼠標從按鈕上抬起，它似乎忘記刪除計時器對象

為了解決第二個問題，用戶必須在滾動的相反方向上單擊一次按鈕，它再次變為靜態。

這是里面需要滾動的div

  function scrollButton(btn, start, speedUp, eDiv, upward) {
    var tempStart = start;

    var repeat = function () {
      //check for boundary conditions
      if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= (eDiv.scrollHeight - eDiv.clientHeight)) {
        scrollErrorLog(eDiv, upward);
      }
      //fire scroll method and reduce time interval
      t = setTimeout(repeat, start);
      if (start > 60) {
        start = Math.round(start / speedUp);
      } else start = 33;
    }

    //bind functions to button events
    btn.onmousedown = function () {
      repeat();
    }
    btn.onmouseup = function () {
      clearTimeout(t);
      start = tempStart;
    }
    btn.onmouseout = function () {
      clearTimeout(t);
      start = tempStart;
    }
    btn.ontouchcancel = function () {
      clearTimeout(t);
      start = tempStart;
    }
    btn.ontouchend = function () {
      clearTimeout(t);
      start = tempStart;
    }
    btn.ontouchstart = function () {
      repeat();
    }
  }

  var scrollErrorLog = function (eDiv, upward) {
    //calculate maximum scroll height
    var maxScrollHeight = eDiv.scrollHeight - eDiv.clientHeight;
    //how much scroll in one button click iteration
    var jumpSize = 40;
    //going up or down?
    if (upward) {
      if (eDiv.scrollTop > 0) {
        scrollTimes--;
      }
    } else {
      if (eDiv.scrollTop < maxScrollHeight) {
        scrollTimes++;
      }
    }
    //scroll the div
    if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= maxScrollHeight) {
      eDiv.scrollTop = scrollTimes * jumpSize;
    }
    // if out of bounds, return to start position and reset scrollTimes tracker variable
    if (eDiv.scrollTop < 0 || scrollTimes < 0) {
      eDiv.scrollTop = 0;
      scrollTimes = 1;
    } else if (eDiv.scrollTop > maxScrollHeight) {
      eDiv.scrollTop = maxScrollHeight;
      scrollTimes = maxScrollHeight / jumpSize;
    }
  }

編輯：我用這個問題作為指導： 需要按下並按住按鈕的 javascript 代碼

編輯#2：這需要主要在觸摸上工作。 在按鈕上單擊它有時會這樣做，有時不會。 在觸摸面板上，它會不斷出現這 2 個錯誤。

Answer 1

解決方案，直到有人找到更有效的方法。

創建新的全局變量 compareScroll = 0; 然后只需在滾動之前檢查 compareScroll != scrollTimes ，並在函數結束時 make compareScroll = scrollTimes

  //where we are currently
  var scrollTimes = 1;
  //check if scrolltimes is at the end
  var compareScroll = 0;

  var scrollErrorLog = function (eDiv, upward) {
    //calculate maximum scroll height
    var maxScrollHeight = eDiv.scrollHeight - eDiv.clientHeight;
    //how much scroll in one button click iteration
    var jumpSize = 40;
    //going up or down?
    if (upward) {
      if (eDiv.scrollTop > 0) {
        scrollTimes--;
      }
    } else {
      if (eDiv.scrollTop < maxScrollHeight) {
        scrollTimes++;
      }
    }
    //checking if we are not at the end of the DIV
    if (compareScroll != scrollTimes) {
      //scroll the div
      if (eDiv.scrollTop >= 0 && eDiv.scrollTop <= maxScrollHeight) {
        eDiv.scrollTop = scrollTimes * jumpSize;
      }
      compareScroll = scrollTimes;
    } else {
      //if we are at the end of the div reset everything
      clearTimeout(t);
      // if out of bounds, return to start position and reset scrollTimes tracker variable
      if (eDiv.scrollTop < 0 || scrollTimes < 0) {
        eDiv.scrollTop = 0;
        scrollTimes = 1;
      } else if (eDiv.scrollTop > maxScrollHeight) {
        eDiv.scrollTop = maxScrollHeight;
        scrollTimes = maxScrollHeight / jumpSize;
      }
    }
  }

編輯：這仍然沒有解決自動滾動的問題，而最終還是沒有解決。