Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
107
rated 0 times [  114] [ 7]  / answers: 1 / hits: 16088  / 10 Years ago, fri, january 23, 2015, 12:00:00

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.


More From » css

 Answers
19

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.


[#68120] Tuesday, January 20, 2015, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
darennevina

Total Points: 422
Total Questions: 128
Total Answers: 105

Location: Comoros
Member since Tue, Mar 14, 2023
1 Year ago
;