46

Using a scrollable div 

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO on Android devices the scrolling on swipe is smooth and even has acceleration & deceleration.

The same code on an iPhone, the scrolling is stiff. When the user releases touch the scrolling stops immediately.

How do you make the iPhone treat the scrollable div like an Android browser with smooth acceleration/deceleration native style scrolling?

Aaron
  • 3,195
  • 5
  • 31
  • 49

3 Answers3

109

You can get native-style scrolling on an HTML element with overflow by using the following proprietary CSS property:

-webkit-overflow-scrolling: touch;

It has some caveats, though. Depending on what's inside the element, rendering might be slightly broken, so you should test it and see if it suits your particular needs. I'm also not sure if it works properly when you specify overflow-y: hidden. If it doesn't, you should be able to get it to work by playing around with different values for overflow-x, overflow-y and overflow (auto doesn't seem to work).

If you need to, you can fake overflow-y: hidden on your div by creating a second nested div with the content and setting that property on it. But I hope that's not necessary.

Marco Aurélio
  • 2,463
  • 1
  • 21
  • 21
  • 2
    You are awesome. I had no idea this existed. – Gavin May 29 '14 at 18:55
  • 2
    Thank you! Another caveat: if you're trying to always show scrollbars in WebKit with http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webki/7855592#7855592, this hides them again. Found a question about that here: http://stackoverflow.com/questions/28871556/webkit-overflow-scrolling-touch-breaks-my-webkit-scrollbar-css-in-ios – Henrik N Apr 17 '15 at 13:42
  • Another caveat appears to be that the user losses the ability to tap the status bar to jump to the top of the page. – Dave Wood Mar 17 '16 at 01:31
  • It's weird that MDN doesn't encourage this CSS (`Do not use it on production sites facing the Web`) but it works! – Linh Dam May 24 '16 at 04:27
  • this is not working for me. at least doesn't work on chrome (mobile or desktop) dev tools say "unknown property name" – MilMike Jun 23 '16 at 11:02
  • For me this doesn't work half the time. If you hit the top of the page then quickly scroll down it doesn't scroll at all, you just see white coming up from the bottom as if you hit the bottom of a web page then it goes away. – Curtis Feb 08 '18 at 22:39
1

The suggestion from Marco Aurélio is actually the best solution. It works best if you set overflow-y: scroll AND adding -webkit-overflow-scrolling: touch to the element as well. You'll get a native-like scroll feeling

MadCoder
  • 51
  • 4
0

Ok, this is what works for my: 

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}
meck373
  • 1,114
  • 1
  • 18
  • 31