Disable inertia scroll for "single-page" webapp

Question

I'm trying to create a "single-page" web-app, in the same style as Gmail, Google Docs, Evernote, etc. where it doesn't make sense to allow inertia scroll to yank at the page.

Here is a video of the effect I'm trying to disable:

http://tinypic.com/r/2eb6fc5/8

How can we accomplish this? There are solutions listed in Disable elastic scrolling in Safari but they are old, don't work on OSX Chrome, while Gmail/Google Docs/Evernote clearly have a solution that works on all OSX browsers.

Answer 1

Update May/2020

There are an array of considerations when disabling inertia scroll, with respect to browser compatibility. Here is a repo which attempts to abstract away those compatibility problems: https://github.com/willmcpo/body-scroll-lock

This repo attempts to reconcile drawbacks in both older solutions listed below:

Update Jan/2019

There's a simpler CSS solution:

body {
    overflow: hidden;
}

---

Original Answer:

I found a perfect solution - override the scroll events.

$body.addEventListener("mousewheel", function(e){ e.preventDefault(); });

Turns out that inertia scroll is really just an extension of normal scrolling, where a special mouse driver emits scroll events in such a way as to emulate the inertia effect. So overriding scroll events inherently prevents inertia scroll.

See this link for examples with cross-platform compatibility.