uds8ig
Last Updated: November 11, 2018
·
8.982K
· ryanricig

Native Scrolling on Touch Devices & Polyfilling

For those of us that have been developing mobile web applications or even making use of tools like PhoneGap to wrap HTML5 applications into native for deploying to various phones, a frequent "gotcha" has been scrolling.

Until recently, most mobile devices have handled web scrolling within a section or div quite poorly. Luckily, several browsers now support the CSS property: -webkit-overflow-scrolling. Simply set this to touch on whatever element you wish to scroll and presto!

.scrollingdiv{
-webkit-overflow-scrolling: touch; 
}

Like most good things on the web, we'll need to 'Polyfill' for all the loser browsers that aren't up to snuff. There are a number of folks out there who have put together great tools to help with this. Here are a few to get you started (my current favorite is Overthrow):

iScroll - http://cubiq.org/iscroll

Scrollability - http://joehewitt.github.com/scrollability/

Overthrow - https://github.com/filamentgroup/Overthrow/

For iScroll & Scrollability you'll need to test for native browser support on your own and only implement if the property isn't supported. Overthrow has a great way of testing to see if it is supported before it does its Polyfilling, although I prefer iScroll's actual polyfill approach to that of Overthrow.

Scroll to town!

1 Response
Add your response

31186

Hey folks. Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.

Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to be hidden, though.

On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the website scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right? https://vidmate.red/

29 days ago ·