Show HN: Reference impl of inertia scrolling in vanilla JavaScript
gist.github.com
In order to implement a high-performance, double-ended virtual list in a cross platform way for a personal project, I had to code my own scroll routines. Scroll anchoring is not available on Safari[1], so prepending elements to a DOM node causes scroll shifting. I tried working around it for days, but solutions were super fragile and inconsistent. Even in browsers that do have scroll anchoring, the behavior is not perfeclty consistent and performance still suffers from repaints caused by on-the-fly scroll compensation done by the browser.
So I decided to use css animations, specifically transform animations, coupled with absolutely positioned elements to have full control of the list behavior. This is not something out of the ordinary to do. But the real challenge was approximating the native scroll feeling on iOS.
I found very little online content regarding how to go about implementing inertia. The general solution was to apply a friction constant after having the deltas yielded by the calculated velocity/acceleration. But iOS also has this mechanism were acceleration increases as you scroll repeatedly. Also, deceleration seemed to be dynamic according to the samplings I made.
The final code [2] is quite trivial, but arriving at this state took quite too many tests, since it's a very very delicate mechanism. Hence, I'm sharing the routines here to help future web-searchers save time in case they happened to fall in this rabbit hole too. There's some avenues for adjusments, the current constants/dynamics found on the code were the ones which simply appealed the most to me. Interestingly, I even came to dislike how iOS accelerates too much on repeated flicks and ended up prefering my own dynamics, go figure.
[1] https://caniuse.com/css-overflow-anchor
[2] https://gist.github.com/jonsecchis/18c4d5de214467f5f94cffb0b...