How to disable inertial scrolling on body for iOS browsers?

Asked 7/10, 2014 at 12:21 Answered 19/1, 2020 at 6:29

Solved javascript jquery html css mobile-safari

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

I have been looking for some time but I haven't found any good solutions. Maybe I am just not looking for the right thing? Is there any hack or workaround that could make this possible?

Interleaf answered 7/10, 2014 at 12:21 Comment(3)

take a look here: gist.github.com/amolk/1599412 – Hypanthium 7/10, 2014 at 12:43

Basically you will have to block the user from swiping the screen via javascript that "removes" the touchmove event. Check Monte's comment for a link. – Curd 7/10, 2014 at 12:55

@Hypanthium Thanks for responding, I have updated my question to make it clearer, as I still want to be able to scroll the body, I just need to to scroll without inertia. – Interleaf 7/10, 2014 at 13:13

You can use div with overflow property, it kill smooth iOS 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

Unstriped answered 7/10, 2014 at 14:2 Comment(1)

Note that this will mess up with the address bar behavior. Safari's address bar will not be minimized on scroll. – Hoopen 4/1, 2021 at 23:28

Add this to the body element's CSS:

-webkit-overflow-scrolling: auto;

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

@meuwka answer achieves your goal, but in a roundabout way—it works because div elements have -webkit-overflow-scrolling: auto; as their default.

Wiretap answered 23/10, 2015 at 21:45 Comment(5)

This work, but at a price. You lose the smooth scrolling. – Thoracoplasty 27/6, 2016 at 9:7

This should be the accepted answer, while meuwka answer works. It is only because the -webkit-overflow-scrolling defaults differently for elements that are not the body. – Horseradish 27/8, 2018 at 12:16

webkit-overflow-scrolling is a non-standard feature: developer.mozilla.org/en-US/docs/Web/CSS/… – Rootstock 28/9, 2018 at 17:17

@Rootstock well if we're specifically targeting iOS browsers I don't think that really matters – Thyrse 20/3, 2019 at 21:32

I've tried this alone and in combination with overflow: hidden but I don't think this is working on iOS anymore. Tried to visualise it here: codepen.io/calsal/full/Exxjwwo. Scroll is disabled on desktop. On iOS Safari (by first scrolling down a bit and then up) I still get the inertia effect. Please advise if i'm wrong. – Njord 9/10, 2019 at 10:31

You can use div with overflow property, it kill smooth iOS 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

Unstriped answered 7/10, 2014 at 14:2 Comment(1)

Note that this will mess up with the address bar behavior. Safari's address bar will not be minimized on scroll. – Hoopen 4/1, 2021 at 23:28

I've used inobounce which can be found here

You'll notice you have to specify a height property and overflow: auto to the element you'd like scrollable, including -webkit-overflow-scrolling: touch;. The docs do a good job at explaining.

Clumsy answered 7/10, 2014 at 13:19 Comment(0)

Just setting the -webkit-overflow-scrolling rule to html and body doesn't work for me.

I had to set webView.scrollView.bounces = false in the viewDidLoad func in swift.Try it and let us know if it solves your problem.

Incident answered 7/11, 2018 at 15:48 Comment(1)

This question isn't asking about Swift. It's about iOS web browsers. – Rossman 14/1, 2019 at 5:6

iOS13 changes :

Accelerated Scrolling on iOS and iPadOS

Accelerated scrolling the main frame has always been available with WebKit on iOS. In addition, developers could use a CSS property called -webkit-overflow-scrolling to opt-in to fast scrolling for overflow scroll. None of that is necessary with iPadOS and iOS 13. Subframes are no longer extended to the size of their contents and are now scrollable, and overflow: scroll; and iframe always get accelerated scrolling. Fast scrolling emulation libraries are no longer needed and -webkit-overflow-scrolling: touch; is a no-op on iPad. On iPhone, it still has the side-effect of creating a CSS stacking context on scrollable elements. Developers will want to test their content to see how hardware accelerated scrolling everywhere affects it and remove unnecessary workarounds.

Matelda answered 19/1, 2020 at 6:29 Comment(1)

webkit-overflow-scrolling: auto doesn't seem to do anything on iOS 13 AFAIK :-( – Matelda 19/1, 2020 at 6:29

Accelerated Scrolling on iOS and iPadOS

Recommended topics

Hot tags