Pause at top and bottom continuous vertical scroll HTML-CodePudding

I have an embedded HTML page containing a single table of event results. I have found the code below which perfectly gives a continuous scroll, however I which to be able to pause for say 10 seconds at both the top and bottom before continuing.

How do I intercept the top and bottom and insert the pause?

Any suggestions would be much appreciated.

/*
Advanced window scroller script-
By JavaScript Kit (www.javascriptkit.com)
Over 200  free JavaScripts here!
*/
var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1

function initialize() {
  startit()
}

function scrollwindow() {
  if (document.all)
    temp = document.body.scrollTop
  else
    temp = window.pageYOffset
  if (alt == 0)
    alt = 1
  else
    alt = 0
  if (alt == 0)
    curpos1 = temp
  else
    curpos2 = temp
  if (curpos1 != curpos2) {
    if (document.all)
      currentpos = document.body.scrollTop   300
    else
      currentpos = window.pageYOffset   1
    window.scroll(0, currentpos)
  }
  else {
    currentpos = 0
    window.scroll(0, currentpos)
  }
}

function startit() {
  setInterval("scrollwindow()", 25)
}

window.onload = initialize

CodePudding user response：

function initialize() {
    setTimeout(startit, 10000);
}

It will delay the excution of the start function by 10 seconds.

CodePudding user response：

Since setInterval is a basic javascript function, which runs a function every n-seconds, you set a global variable to capture that "interval", then cancel it when the user performs some action (click on a button). Then resubmit the setInterval to start running in the future, or tie it back to another onClick event. An example would be to have a button that will toggle the setInterval on and off, which will act as a pause/run.

Below is an example of how you could set this up. I have not tested it, so there may be some use cases that could cause issues.

var myInterval = null;
function startit() {
  myInterval = setInterval("scrollwindow()", 25)
}

Then to cancel the interval:

function stopInterval() {
    clearInterval(myInterval);
    myInterval = null;
}

Example of how to toggle the interval on and off:

function toggleInterval() {
  if ( myInterval ) {
    stopInterval();
  }
  else {
    startit();
  }
}

Then just add it to any html element, or a button. This example is assuming the css is locked at the top of the scrollable pane so the user could always have access to click it.

  <span onClick="toggleInterval()">Click to pause/continue scrolling.</span>

  <button onClick="toggleInterval()">Pause/Scroll</button>