Overflow:scroll on iOS roll lag

Use

-webkit-overflow-scrolling

property controls whether the element uses a scrolling rebound effect on the mobile device.

value

auto

With normal scrolling, when your finger moves away from the touchscreen, scrolling stops immediately.

touch

Using scrolling with a rebound effect, the content continues to scroll for a period of time as the finger moves away from the touchscreen. The speed of continued scrolling is proportional to the intensity of the duration and the scrolling gesture. A new stack context is also created.

Non-standard
This feature is non-standard, please try not to use it in a production environment!

There are no relevant specifications yet. Also mentioned in the Safari CSS Reference document provided by Apple.

Useful only on iOS

In fact, Safari really uses native controls, and for pages with-webkit-overflow-scrolling, a uiscrollview is created that provides a child layer for use by the rendering module.

Extract:

1. From SVN log, it is supported around the WebKit 108400 version, so iOS safari should be 5.0. Android is supported at more than 4.0.
2. From the front-end development point of view, only need to know the CSS properties-webkit-overflow-scrolling is really created with hardware acceleration of the system-level control, so the efficiency is very high.
3. From a practical point of view, the use of this approach is relatively more memory, preferably in the production of a very large area of overflow when applied.

Overflow:scroll on iOS roll lag