Programmatically Scroll

cho.sh

researchmini

3,249 notes

3,249 notes

Programmatically Scroll · cho.sh

Programmatically Scroll

Warning

This post is more than a year old. Information may be outdated.

Lesser Known Trick

// Set the desired scroll speed
const scrollSpeed = 0.2;

// Set the delay before starting the scroll (in milliseconds)
const

Backlinks1

Comments0

No comments yet. Be the first to share your thoughts.

Comments

startDelay

5000

;

// Calculate the total distance to scroll

const totalScrollDistance =

document.documentElement.scrollHeight - window.innerHeight;

// Calculate the scroll duration based on the scroll speed and total distance

const scrollDuration = totalScrollDistance / scrollSpeed;

// Get the start time

let startTime = null;

// Function to handle the scrolling animation

function scrollAnimation(currentTime) {

if (startTime === null) {

startTime = currentTime;

}

const elapsedTime = currentTime - startTime;

const scrollPosition = (elapsedTime / scrollDuration) * totalScrollDistance;

window.scrollTo(0, scrollPosition);

if (elapsedTime < scrollDuration) {

window.requestAnimationFrame(scrollAnimation);

}

// Function to start the scrolling animation after the specified delay

function startScrolling() {

setTimeout(() => {

window.requestAnimationFrame(scrollAnimation);

}, startDelay);

}

// Call the startScrolling function to begin the scrolling animation after the delay

startScrolling();

Comments0

No comments yet. Be the first to share your thoughts.