Experiment with native scrolling on touch

Prinzhorn / scrollmeister

Open-source JavaScript framework to declaratively build scrolling experiences

https://www.scrollmeister.com/

MIT License

37 stars 5 forks source link

Experiment with native scrolling on touch #26

Open Prinzhorn opened 6 years ago

Prinzhorn commented 6 years ago

If we scroll inside <scroll-meister> we won't have any issues with the address bar triggering layouts. We would get 100% native scrolling. Need to experiment with that as the only question is whether it performs well (since we're not actually scrolling anything the only question is if we can query the scroll offset at 60 fps)

Maybe we don't even need #25 if we can use native scrolling everywhere.

Prinzhorn commented 6 years ago

BTW: the most important benefits would be support for forms, buttons, links, IFRAMES. All without dirty hacks bruh

Prinzhorn commented 6 years ago

In general it works surprisingly well. But some of the demos don't perform as well with native scrolling. And it's basically impossible to debug without owning a Mac.

Prinzhorn commented 6 years ago

We should put our efforts into making native scrolling smooth because

multiple <scroll-meister> in one page and native content between them 😱, e.g. nav, footer, sections, put scroll-meister into flexbox or whatever
text selection
forms
links
iframes
visible scrollbar
native deceleration (different on iOS and Android)
address bar scroll-to-top on ios
address bar behaves naturally

Prinzhorn commented 6 years ago

Native scrolling is working well on Android even with the address bar moving. However, iOS is still horrible as always. But it's buttery smooth with fake scrolling. So I have no idea what Apple is doing there and I have no way to debug it without a Mac (good luck getting remote debugging work on anything but a Mac). This makes me sad, but maybe it changes in the future. At least we have the behavior ready to get if Apple will ever get its shit together. We might make both behaviors work so users can decide what they use and test performance on real world pages. The only issue is with our depdencies because everybody and their mother expects ^scroll so we can't just have a second fake-scroll. Might need to combine both and make that a prop or something.