Subscribe to get my new tutorials in your inbox.
momentum scrolling on ios with css

Add momentum scrolling on iOS devices with CSS

Let’s find out how you can add momentum scrolling to your mobile web applications on iOS devices.

What is momentum scrolling?

Let’s watch this video. A video is always better at explaining things.

Did you notice the bouncy effect at the end of the scroll on both directions? Well, that’s momentum scrolling.

Why you should add momentum scrolling?

It improves the user experience and gives a native feeling to your mobile web application.

Code

The markup needed is shown below.

<div class="scroll-container">
  <p>Large content inside....</p>
</div>

And then here’s the CSS needed to add momentum scrolling to iOS devices such as iPhones, iPad’s

.scroll-container {
  overflow-y: scroll; /* can be auto or scroll */
  -webkit-overflow-scrolling: touch; /* adds momentum scrolling for iOS*/
}

Can I see this behavior on my computer browser?

No

How about Android browsers?

No

Browser support

It is supported only on iOS Safari browsers.

Momentum scrolling for iOS with -webkit-overflow-scrolling

Pls note

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. More info: MDN

Write a Comment

Your email address will not be published. Required fields are marked *