area list and people list lack momentum scrolling on iOS devices

[zarino]

The area I can scroll in on a phone or tablet is quite small, and it's made painfully hard by the fact that momentum scrolling doesn't work, so I can literally only drag the area list or people list up a little bit at a time.

To enable momentum scrolling on iOS, your element needs to have overflow: scroll and -webkit-overflow-scrolling: touch.

But we currently use overflow: auto to only add scrollbars if they're required. Since the SeePoliticiansTweet UI includes a lot of full-height vertical panels, it would be a shame to force scrollbars to appear on all of them even if there were nowhere to scroll to (which is what overflow: scroll does).

-webkit-overflow-scrolling: touch does not work with overflow: auto.

One solution might be to set overflow: scroll if we know the user's device renders invisible scrollbars (like iOS and modern OS X). Since the scrollbars are invisible, overflow: scroll will look exactly the same as overflow: auto, so it should all look and feel very natural. You can detect vertical scrollbars by comparing scrollable element’s clientWidth to its offsetWidth – it's a bit hacky but it works.

[zarino]

Pull request here: https://github.com/mysociety/SeePoliticiansTweet/pull/78