Scrollability: Getting iOS physics for scrolling right, by Joe Hewitt
Posted by Dion Almaer 2 years ago on mobile native physics scrolling web
I am very excited to see JavaScript code under Joe Hewitt’s name again.
He has been frustrated with the state of scroll physics in Web apps on iOS, and I am guessing that after using the new mobile Web Twitter app, decided to have at it and see what he could whip up in a day, ending with Scrollability.
Matching the native physics isn’t easy. It is so hard to get past the uncanny valley feeling a lot of the time, and although I am very impressed with what the mobile Twitter has done with their new Web app, it definitely has similar issues that I have seen with many attempts.
As you try to match the same easing and acceleration etc…. you also have to deal with trying to make sure that you don’t create garbage that the JavaScript VM will try to reclaim (causing the jankiness). This was even an issue in webOS, which used JavaScript for scrolling too.
Joe’s approach uses CSS transforms to do moving (element.style.webkitTransform = 'translate3d(' ....) and is fully customizable with constants to let you tweak the feel (from overscrolling, deceleration rate, bounce time, when to snap to a page, etc).
The example feels pretty much like butter on my iPhone 4, and I want to crank on: the number of elements in the list, as well as the complexity of the list (e.g. each list item having an image, etc), virtual list support (e.g. more physical items that you would want to store in the list so having to swap in and out).
How does it feel to you? It would be awesome if Dustin Diaz would sneak this into mobile Twitter so we can see it in a real world situation…. what do yo u say Dustin? It is Friday after all :)