Last active
October 3, 2024 05:17
-
-
Save sahilatahar/613739397ff09fd92ab7fecbe781c8f6 to your computer and use it in GitHub Desktop.
Implementing Scrolling/Infinite Scrolling to Dynamically Load Data on Webpages or Containers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Scroll to end of container | |
// If you have id of container then replace #id with your container id (e.g. #imagesContainer) | |
// If you have class of container then replace #id with your container class (e.g. .imagesContainer) | |
const container = document.querySelector("#id") | |
const scrollToEnd = () => { | |
container.scrollIntoView({ | |
// behavior: "smooth", | |
block: "end", | |
// inline: "end", | |
}) | |
} | |
// Call this function to scroll to end of container only once | |
scrollToEnd() | |
// Scroll to end of container after every 2 seconds uncomment below code and comment above scrollToEnd() function call | |
// const interval = setInterval(() => { | |
// scrollToEnd() | |
// }, 2000) // Set time according to your need | |
// Call stopScrolling function to stop scrolling | |
// const stopScrolling = () => { | |
// clearInterval(interval) | |
// } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Scroll to end of webpage only once | |
window.scrollTo(0, document.body.scrollHeight); | |
// Scroll to end of webpage after every 2 seconds uncomment below code and comment above code | |
// const interval = setInterval(() => { | |
// window.scrollTo(0, document.body.scrollHeight); | |
// }, 2000) // Set time according to your need | |
// Call stopScrolling function to stop scrolling | |
// const stopScrolling = () => { | |
// clearInterval(interval) | |
// } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment