Grow your CSS skills. Land your dream job.

Last updated on:

Momentum Scrolling on iOS Overflow Elements

Web pages on iOS by default have a "momentum" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn't. You can add it back with a special property.

.module {
  width: 300px;
  height: 200px;

  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
Check out this Pen!

Comments

  1. Hey Chris,
    Is there a way to prevent the momentum scrolling on desktop (using a magic mouse or trackpad) as well as on iOS? I have been searching for a long time, but without luck.

    • Permalink to comment#

      Hey David, you can implement a scroll debouncer that can limit to only 1 scroll event being run every few milliseconds. Thing is, it will be far from perfect and in several cases may feel pretty unnatural.

      Perhaps I’ll write a simple tutorial for this.

  2. Chandra

    Chris, momentum scrolling doesn’t seem work inside an iframe. I’ve tried several settings, I’ve also tried to iframe in the demo,

    http://playground.johanbrook.com/css/touchtest.html

    But it doesn’t produce scrollbars 99% of the time. Looking into a hack.

  3. I’m currently using webkit-touch-scrolling to increase performance the performance of scrolling in iPad and iPhone web applications. It has significantly increased performance, but just like most applications that use a timeline like environment with images, the iPad runs out of memory when a lot of ’tiles’ have loaded.

    Is there any way to track the scroll position when momentum scrolling? Much like the ‘touchmove’ and ‘scroll’ event? So far I have seen lot of no’s.

    My current solution would be to set a variable when the user starts scrolling and set a setTimeout() to an X amount of milliseconds to ‘simulate’ the scroll function.

    • Permalink to comment#

      This is just a little side note, the reason you run out of memory is because apple will only allow you to have 10 mb of ram with web applications. Why would they let you create native like applications on the web? If you could, there would be no reason to pay to be in their app store. We need to hold them accountable.

  4. Irfan
    Permalink to comment#

    I tested your demo on Windows Phone (IE10) and both divs. scrolled kinetically.

  5. Exactly what I needed, Chris!

    And I think you might be from the future, because you always seem to foresee what I’m going to need next. Very appreciated, man!

  6. Andy
    Permalink to comment#

    So incredibly helpful. Thank you!
    I was wondering how I managed to accidentally disable the momentum scroll.

  7. Permalink to comment#

    Thanks! So relieved CSS fixes this!

  8. Annie
    Permalink to comment#

    Every time I try this style out, some of the content on some of my pages just disappears –– has anyone else had this problem? The elements that disappear still take up space (so it’s not like they’re display:none;) I can see the content when I look in Chrome’s inspector window, and the yellow indicator points to where my content is supposed be, and it basically points to these invisible divs that have height:0px;

    It’s definitely these “momentum scrolling” styles causing this. I’ve tried only deleting those styles, and my content comes back, but then goes poof when I add the them again.

    Because I wanted the whole page to have the momentum scrolling, this is how I did my styles:

    * {overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
    

    Any ideas what I might be doing wrong? Any thoughts much appreciated.

    • Annie
      Permalink to comment#

      Oops – nevermind! Tried adding the style to html instead, worked like a charm. Duh

  9. Claudio
    Permalink to comment#

    Thank you Annie! I’ve fixed my issue! Change the -webkit-overflow-scrolling to none before to change overflow to hidden so I can prevent the disappearing :)

  10. Kiran
    Permalink to comment#

    Thanks buddy!

  11. Alex
    Permalink to comment#

    I noticed that using overflow-y: auto; (from Chris’s example) also works. Tested in the native browser and Chrome of a Samsung tablet with Android 4.0.4 and also on iPad with iOS 6, Safari + Chrome.

  12. Balbir
    Permalink to comment#

    overflow-y: auto; is working on all browser for me but not working on iPad. I am using following Style:

    .m-scrollable-filter {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    }

    pls give me any response.

    Thanks

    • Lachlan
      Permalink to comment#

      Chris said in the article that overflow-y must be set to scroll for -webkit-overflow-scrolling: touch to work. So use this code instead (there’s no need for !important):

      .m-scrollable-filter {
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
      
  13. James
    Permalink to comment#

    Anyone have this associated issue and know how to prevent it (or what I’m doing wrong)?…

    I have a div within a wrapper div which specifically allows horizontal scrolling but prevents vertical scrolling. Everything is fine except that on ipad it remains possible to vertically lift the entire div, which then bounces back on release. What is more annoying is that this then allows the same div to ‘drag’ diagonally with a diagonal swipe. Here’s the page in progress…

    http://raewilkinson.scratchthesky.com/

    • James
      Permalink to comment#

      I fixed this issue with javascript that prevents the default scroll-bounce behaviour in the vertical axis. It works but it’s not ideal. I still have no insight into how the entire div could become ‘dragable’ in every direction.

  14. Permalink to comment#

    If I add this:
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    to the html, or body, or any major block of my website I get no scroll improvements and I cannot tap on the top bar to scroll to the top. Any idea why?

    • Lachlan
      Permalink to comment#

      You don’t need to add it to html or body on your webpages; Apple uses momentum scrolling on all pages automatically. -webkit-overflow-scrolling: touch is just for scrolling other elements on the page (only being able to scroll, say, a p). Also, touch scrolling gives no “scroll improvements” — it just lets you flick your finger to quickly get through something long.

  15. Warren
    Permalink to comment#

    Thank you very much for this, exactly what i needed for fixing the scrolling issue on ios.

  16. Mike in NY
    Permalink to comment#

    Hey — Just thought id take a second to say THANK YOU for this … as much as it seems i should have already known about the -webkit property, had i not seen this i may very well have gone down a dark road trying to implement a javascript replacement for overflow-y … THANK YOU SINCERELY

  17. Just a warning for folks out there finding this great feature – if you are using it in a rule that also includes overflow-x: hidden – beware. Because the -webkit-overflow-scrolling: touch property will allow the user to scroll vertically and horizontally, which may reveal hidden divs that are meant to be hidden to the left or right.

  18. Kaushi
    Permalink to comment#

    Does any one know how to add a auto scrolling function to a horizontal scroll bar???I have some images in a table row and i want that row to auto scroll horizontally but not manually..
    Please help me

  19. tushar
    Permalink to comment#

    I have customize scroll using CSS3, its working fine in all browser but the overflow-x is not visible in iphone. Here is the code what I have done. http://codepen.io/anon/pen/aLwhq

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".