Experience excellent touch screen web page development acceleration slide and rebound, slide

Experience excellent touch screen web page development acceleration slide and rebound, slide
Accelerated slide and rebound css3 properties close to the naturalapp experience

A few days ago, the author published an article about mobile Web page development soft keyboard and fixed blog called: webapp front-end development soft keyboard and position: fixed for us inconvenience

I think the summary is quite good, but unfortunately, through learning and communication, there will soon be a better and more perfect solution, and it is still implemented by the native safari control, the code is very simple

overflow-y:auto;-webkit-overflow-scrolling:touch;

 

Highly Efficient system-level controls with hardware acceleration, simple but not simple

The code is very simple, but we can replace the webapp front-end development framework iscroll that we used to solve the problem of Ios soft keyboard and fixed.

The iscroll framework does solve our problems, but it also brings us a lot of sequelae and code processing troubles.

 

-Webkit-overflow-scrolling is implemented by the native safari control. The working principle is: on the container with this attribute, the system creates a uiscrollview, apply it to this element and use it as a rendering object, so that we can experience smooth touch screen sliding.

The performance on Ios is satisfactory, and the conflict between webpage sliding and area sliding is also well resolved.

 

Based on the above ideas, the fixed position of the suspension and scrolling Element Separation code Display

<! Doctype html> 
Someone may ask why the html and body must be added. Do these two attributes need to be added?
Scenario display:
Add both html and body

Neither html nor body is added or only one

The former is much less likely to trigger webpage slide than the latter. Try it on your own.
 
-Webkit-overflow-scrolling disadvantages
Of course, it also has its own shortcomings. Since a system-level control is created, there will inevitably be memory consumption. However, compared with a framework, its cost-effectiveness is self-evident.
The performance in Android is not satisfactory, so we just use it to replace the previous development framework iscroll to optimize the Ios experience.
 
The author's knowledge of-webkit-overflow-scrolling is still very short, and the opinions in the blog may not be comprehensive enough. You are welcome to help improve your understanding.