-1

How do I recreate an article details page like "Bloomberg" in ReactJS? When scrolling down, the new related article loads.

Is there anywhere I can find related info or example/clone codes?

https://www.bloomberg.com/news/articles/2023-04-11/australia-s-new-city-bradfield-faces-climate-change-challenges

Shawn Yeung
  • 99
  • 1
  • 6
  • Did you give it a shot? if so, where did you get stuck? Lots of infinite scroll examples on the web – Evert Apr 15 '23 at 01:58

1 Answers1

1

The basic of infinite scroll is to monitor the position of the scrollbar of a container by using the onscroll event. Once the scrollTop is almost at the end of the scrollHeight, let's say 80%, we could trigger an XHR/fetch to get more information from the server and render the new result on the UI.

If you are interested in building it in Vanilla JS, you could refer to this stack overflow post.

If you are interested in building it with ReactJS, you could refer to this post.

In my previous experience, we might call Bloomburg's implementation the load-on-demand with a scrollbar position criteria. So, the rendering and data loading are synced, you could find it through the browser's dev tool. If we already got a lot of data and would like to provide a shorter time to interact, we might render the element on demand, for example ag-grid gives an awesome performance on 100K rows on the UI.

MicrodataXYZ
  • 26
  • 4