Imagine having a hefty 520 page book with over 6,200 lines of text ranging from 5 to 300 characters each. The challenge lies in efficiently displaying this content on the screen for users to read without causing lag or performance issues.
Attempting to render all 6,000+ elements simultaneously would undoubtedly result in slow loading times, particularly on mobile devices.
One approach is to load new sets of lines as the user reaches the end of the current display, triggering an event to fetch additional content. While this method works smoothly on Chrome, Safari introduces jerkiness due to its momentum scrolling behavior on iPhones.
An alternative solution considered was to draw the text on a scrollable canvas; however, creating a canvas tall enough to accommodate 1,000,000 pixels of content proves impractical.
Experimentation with a custom canvas scrolling mechanism involving dynamic content loading upon touch interaction resulted in significant delays and sluggishness.
While each method presents its own advantages and drawbacks, the initial approach seems the most straightforward to address. An inquiry arises regarding the potential to disable Safari's momentum scrolling to enable manual control over the window's scrollY property.
It is worth noting that the content remains static, with no need for dynamic updating other than potential variations in font size across different devices. Pre-rendering the content may offer a solution, although the specifics of implementation remain uncertain.
In summary, the primary dilemma revolves around identifying an effective JavaScript library or method (preferably within React) for presenting a list of 6,000+ differently sized lines of text.
Thank you.