All geek questions in one place

How to disable inertial scrolling on the body for iOS browsers?

I need to disable inertial scrolling on the body element for the iPad, but keep the ability to scroll the page without inertia.

I searched for a while, but I did not find any good solutions. Maybe I just wasn’t looking for the right one? Is there any hack or workaround that could make this possible?

+6
source share
3 answers

You can use div with overflow property, it kills iOS smooth scroll

<body> <div class="scroll"> long long text... <div> </body>

Css

 html, body { height: 100%; margin: 0; overflow: hidden; } .scroll { overflow: auto; height: 100%; }

http://jsbin.com/palixi/edit

+2
source

Add this to the body CSS element:

 -webkit-overflow-scrolling: auto;

The default value for -webkit-overflow-scrolling is touch . This tells iOS devices to use inertial scrolling. Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

@Meuwka's answer reaches your goal, but in a circular way - it works because div elements have -webkit-overflow-scrolling: auto; as their default value.

+9
source

I used inobounce , which can be found here

You will notice that you need to specify the height and overflow: auto property for the element you want to scroll, including -webkit-overflow-scrolling: touch; . The documents explain well.

0
source

Source: https://habr.com/ru/post/976358/

More articles:


All Articles