There are many usage scenarios for infinite scrolling, and some difficulties need to be paid attention to. For example, the links in the footer cannot be accessed because the content keeps pushing the footer away; How do you handle resizing events when the phone changes from vertical to horizontal? Or, how can you prevent the page from getting stuck when the list is too long.
We are going to use 3 techniques to achieve our goal: DOM recycling, tombstones and scroll anchoring.
We will use three techniques to achieve our goal: DOM recycling, tombstone, and rolling anchoring.
In the original text, a SVG diagram vividly shows the principle of DOM recycling.
The number of DOMS in the viewport is fixed and computable. Therefore, when scrolling, the DOM on the upper boundary of the viewport is deleted and can be reused as the DOM to be displayed on the lower boundary of the viewport.
However, the deletion and addition of DOM will still consume performance. A better implementation scheme is given in this paper.
Use CSS to simulate the deletion and addition of DOM.
also,Performance optimization of viewport container based on CSS contain
There is another paragraph in this paper, which calculates the height according to the total number of lists to realize that the scroll bar truly reflects the data length.
Tombstones are actually placeholders.
The placeholder DOM element has the problem of real element content size and high inconsistency.
Scroll anchoring needs to be introduced, and the anchor point is used to record the rolling distance of the element and the offset value from the viewport boundary.
The scroll anchor will be invoked when the tombstone is replaced and the window is resized