Infinite scroll list

Time:2021-12-5

Complexities of an infinite scroller

Code example of implementation

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.

DOM recycling
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.

position:absolute;
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.

The intersection observer API also mentioned the problem of high latency.
Finally, it introduces Houdini’s Compositor Worklet
(know the translation)

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

Recommended Today

The real problem of Alibaba IOS algorithm can’t hang up this time

More and more IOS developers continue to enter the peak of job hopping in 2020 Three main trends of interview in 2020: IOS bottom layer, algorithm, data structure and audio and video development Occupied the main battlefield. Data structure and algorithm interview, especially figure, has become the main reason for the failure of most first-line […]