Browse By

Smooth and momentum scrolling on touch devices using CSS

You all know how to use CSS property “overflow: scroll / auto”. What about a touch enabled device, a tablet or a mobile phone??? Basically mobile browsers sometimes don’t respect “overflow” property correctly. The CSS property “-webkit-overflow-scrolling” fix this issue. Even it added a smooth and momentum scrolling to your block specially noticed on iOS devices.

Code:

-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
-webkit-overflow-scrolling: auto; /* stop scrolling immediately */

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for the given element.

Note: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. Source: MDN

Latest Posts