Code or Die live to code

Momentum Scrolling FTW!

10 May 2016

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.

  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.

  1. MDN Docs 

  2. CSS Tricks 

Tags:

Jekyll, CSS, UX