macosbrowserscrolltrackpad

OS X Trackpads/M-Mouse allow scrolling off edge of the browser (how do we turn it off?)


I just noticed that in OS X, the use of a trackpad or magic mouse on Chrome or Safari causes the user to be able to scroll off the edge of the page. Here's an image to demonstrate:

https://i.sstatic.net/2hhAp.jpg

Notice the big grey area between the page and the toolbar—this is caused by scrolling off the screen.

What can I write in my code to stop this from happening? I've noticed a couple of sites that do it. Gmail is one, and the other is https://www.apple.com/au/iphone-5c/

The reason I ask is that I'm designing a page that has a similar one page animated scroll to the iPhone 5C page. And every scroll with a trackpad or MM is causing the nav to shift up and down :S.

Thanks in advance for any help!


Solution

  • Managed to fix it (of course I searched for like 20 minutes before posting here, and then as soon as I posted, managed to find the answer).

    For anyone also struggling with this issue, here is the answer:

    The functionality is called Inertial Scrolling and a simple overflow statement selecting html will fix this :)

    html {
     overflow: hidden;
    }