Menu
I've got a problem with vertical scroll in iOS Safari on a web page: while being scrolled, page moves in a very slow way, with high resistance (such behavior is not usual for iOS browsers)
My attempts to locate the problem:
<!-- piece of HTML listing -->
<body>
<div id="wrapper">
(here goes some content)
</div>
</body>
I detected the problem in the overflow-x:hidden; rule for div#wrapper, changing it to 'overflow:hidden;' or removing it dynamically in web debugging panel.
Is there any chance to fix it without changing the page layout?
Repeats on Safari / iOS 6.1.4 and 7 (both iPad and iPhone), also in iOS Simulator on OS X.
707
The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
Many people have trouble with their scrolling on Safari. If you are having problems with Safari, you can try to fix this by checking system preferences on your computer. Click on accessibility, then go to pointer control. You can adjust the scrolling speed to fix the problem.
Momentum scrolling (also called Inertial scrolling) is an interaction technique that applies acceleration to an element (a page, image, div, etc.) so it scrolls by quickly.
Usually, we can use overflow: hidden on the <body> element to prevent scrolling.
You can try to add the webkit specific css line to you div:
#wrapper{
-webkit-overflow-scrolling: touch;
}
read more about momentum and ios scrolling here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
