Code or Die live to code

Momentum Scrolling FTW!

The mobile experience for this page is responsive via relative sizing, images (such as they are) and media queries, but from Safari on iOS there was a distinct lack of snappiness in scrolling leading to a stagnant feeling. We must bring back the bounce!

‘Inertial’ or momentum scrolling is easily enabled with the CSS property -webkit-overflow-scrolling.1

Thanks to an article from CSS Tricks2, this was a simple matter of adding two lines to the body selector.

1
2
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;

Page scrolling from mobile, that is to say, from iOS WebKit, now has the familiar bounciness. Cross-browser behavior at least from the point of view of device mode in Chrome Dev Tools seems to be looking A-OK as well.

Tags:

Jekyll, CSS, UX