autoscroll (like movie credits) but the user can takeover by simply scrolling

user_15289586 0
Viewed 248

I am looking into creating a website which will serve as a a digital leaflet for a musical theatre. The idea is to have an autoscrolling credits list as landingpage. I've looked at examples on codepen to see how this effect is been achieved. But I would also like the user to interact and scroll themselves if they want to. When they stop scrolling the credits will turn back to autoscroll. I didn't find any example who tackles this issue. Does someone of you know a script (JS, or plain css…) that can help me with this?

autoscroll css javascript
2 Answers

The most straightforward way is to set up a requestAnimationFrame() function and increment the value accordingly, then set the scroll position to it. Then add the wheel event to detect when a user scrolls (don't use the 'scroll' event though, it already gets called when you change the scrollTop value of the body), also don't forget to cancel the requestAnimationFrame() function. The code would look something like this:

let body = document.body,
  starter = document.querySelector("h1"),
  scroll_counter = 0,
  scrolled,
  auto_scroll_kicked = false;

starter.addEventListener("click", start_scrolling);

function start_scrolling() {
  auto_scroll_kicked = true;
  body.offsetHeight > scroll_counter
    ? (scroll_counter += 1.12)
    : (scroll_counter = body.offsetHeight);
  document.documentElement.scrollTop = scroll_counter;
  scroller = window.requestAnimationFrame(start_scrolling);

  if (scroll_counter >= body.offsetHeight) {
    window.cancelAnimationFrame(scroller);
  }
}
window.addEventListener("wheel", (e) => {
  if (auto_scroll_kicked) {
    window.cancelAnimationFrame(scroller);
    scroll_counter = 0;
  }
});

Play with the codepen if you'd like: https://codepen.io/SaltyMedStudent/pen/QWqVwaR?editors=0010

There are many options to use: easing functions and etc, but hope this will suffice for now.

user_144707840

In your auto scroll routine before changing position check if previous position is the same as current scrolling position, if it's not - the user scrolled it:

let el = document.documentElement,
    footer = document.getElementById("status").querySelectorAll("td"),
    scroll_position = 0,
    scroll_speed = 0,
    scroll_delta = 1.12,
    scroller,
    status = "stopped";

el.addEventListener("click", scroll);

info();

function scroll(e)
{
  if (e.type == "click")
  {
    window.cancelAnimationFrame(scroller);
    scroll_position = el.scrollTop; //make sure we start from current position
    scroll_speed++; //increase speed with each click
    info("auto scroll");
  }
  //if previous position is different, this means user scrolled
  if (scroll_position != el.scrollTop)
  {
    scroll_speed = 0;
    info("stopped by user");
    return;
  }

  el.scrollTop += scroll_delta * scroll_speed; //scroll to new position
  scroll_position = el.scrollTop; //get the current position

  //loop only if we didn't reach the bottom
  if (el.scrollHeight - el.scrollTop - el.clientHeight > 0)
  {
    scroller = window.requestAnimationFrame(scroll); //loop
  }
  else
  {
    el.scrollTop = el.scrollHeight; //make sure it's all the way to the bottom
    scroll_speed = 0;
    info("auto stopped");
  }
}

function info(s)
{
  if (typeof s === "string")
    status = s;

  footer[1].textContent = el.scrollTop;
  footer[3].textContent = scroll_speed;
  footer[5].textContent = status;

}

//generate html demo sections
for(let i = 2, section = document.createElement("section"); i < 6; i++)
{
  section = section.cloneNode(false);
  section.textContent = "Section " + i;
  document.body.appendChild(section);
}

//register scroll listener for displaying info
window.addEventListener("scroll", info);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body
{
  font-family: "Roboto", Arial;
  user-select: none;
}

section
{
  min-height: 100vh;
  font-size: 3em;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

section:nth-child(even)
{
  background: #0b0d19;
}

section:nth-child(odd)
{
  background: #131524;
}

#status
{
  position: fixed;
  bottom: 0;
  color: #fff;
  margin: 0.5em;
}

#status td:first-of-type
{
  text-align: end;
  padding-right: 0.4em;
}
#status td:last-of-type
{
  font-weight: bold;
}
<section>
  Click to start Scrolling
</section>

<table id="status">
  <tr><td>position:</td><td></td></tr>
  <tr><td>speed:</td><td></td></tr>
  <tr><td>status:</td><td></td></tr>
</table>

user_29300380
Related