Momentum Scrolling on iOS Overflow Elements

Community resources Webflow Tips
1

A little tip for you.
As I was designing a typical dashboard app with three main columns with different height due to content. The columns was set with overflow scroll but on iOS the scroll was not acting as your used to on safari and iOS.
I found this article over at CSS-tricks
Momentum Scrolling on iOS Overflow Elements
I added the css to the elements and voilá the scroll acting as you would expect.

2 Likes
2

I was wondering why it didn’t work as expected. since I’m using webflow because I’m a non coder (as they seem to think their tool is built for), how would I add this behavior easily to a webflow site? is there a simple way to blanket apply it to the entire site, so every overflow element behaves this way in iOS?

3

okay, I think i figured out how to add the code for the whole page. I put this in the head custom code area for the page:

<style media="screen" type="text/css">
html {
    -webkit-overflow-scrolling: touch;
}
</style>

but, somehow that totally messes up the index for elements that need the scroll, and only on iOS devices. there’s a modal view on my page, and now the modal appears behind other elements, not on top of everything anymore. the only difference is adding that line of code. still positions fine on desktop. is there a fix for this? totally mind boggling.

My Page - click the “?” circles, when viewing on iOS device
https://preview.webflow.com/preview/k3dproto?preview=695d70903e58f8e829ae9fc17a918c69 - go to “My Page”

384×512 55.7 KB

1 Like
4

Haven’t you fixed this issue with -webkit-overflow-scrolling: touch
yet?