按住按钮模拟滚动

Question

I have a function bound on button "onmousedown", which emulates scrolling through a div. problem arises with multiple fast clicks and press and hold for too long.

for example, if the user scrolls to the bottom of the div, and quickly clicks multiple times on "down" button, the OL inside the div is jittering up and down very fast (faster than 33ms which is the fastest scroll speed possible). I believe that it creates multiple timer objects which each scroll the div without clearing those objects?

another problem is that, if the button is held for too long and released, it acts like the button is still held down. (which scroll at the 33ms rate). Seems like it forgot to delete timer object once the mouse is lifted from the button

To solve the second problem, the user has to click the button once in the opposite direction of the scroll, and it becomes static again.

this is the div inside which needs to be scrolled

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

EDIT: I used this question as a guideline: Need javascript code for button press and hold

EDIT #2: this needs to work mainly on touch. on button click it sometimes does this and sometimes doesn't. on touch panel it does those 2 errors constantly.

Answer 1

Solution until someone finds something more efficient.

Created new global variable compareScroll = 0; then just check if the compareScroll != scrollTimes before scrolling, and at the end of the function 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;
      }
    }
  }

EDIT: this still doesn't solve the problem of automatic scroll while not at the end still.