Get my new tutorials in your inbox every week
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

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

Read my other interesting topics:

Write a Comment

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