按住按钮模拟滚动

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

编辑：这仍然没有解决自动滚动的问题，而最终还是没有解决。