is often used on social media sites such as Twitter or Pinterest. The feature allows users to load some pictures/contents on a website and then load more once reaching the end of the webpage. Infinite scroll I used to get random pictures. This article will focus on how to use JavaScript to make use of some properties to achieve infinite scroll. You can find other project files (HTML or CSS files) in this . Unsplash API repo Four Properties to Achieve Infinite Scroll A) : How far the document has been scrolled from the top window.scrollY B) : The visible part of the window window.innerHeight C) : The height of the entire document D) 1000px (or any value): The distance from bottom of document document.body.offsetHeight The diagram below better illustrates these properties: Looking at the above, we can listen to the scroll event: If A (scrollY) + B (innerHeight) >= C (document height) - D (1000px) -> load more photos // Check to see if scrolling near bottom of page; load more photos window.addEventListener('scroll', () => { if ( window.scrollY + window.innerHeight >= document.body.offsetHeight - 1000 ) { getPhotos(); } }); Final thoughts There're other tools ( ) to implement an infinite scroll. If you find this article useful or have any questions, connect me on or follow me for . Intersection Observer API LinkedIn more articles Also published . here
