Disable drag to reload

Certain mobile browsers, for example Safari, will reload the page when you drag down. This is usually a desired behaviour, but when making some interactive applications that relies on the user dragging a lot, for example maps, it can be an issue.

I bumped into this while making Kalimba. The application worked fine on desktop with mouse interactions, but it’s intented to play on a touch device using your thumbs, just like on a real kalimba instrument. With the default drag to reload mechanic it was impossible to play, as the page would reload and the content shift around in unwanted ways.

Adding the following CSS properties to the body-element of the page disabled the behaviour:

body {
  overflow: hidden;
  touch-action: none;
}