Home > Developer > Web Develop
A few days ago, the landlord published an article about mobile phone web development soft keyboard and fixed blog is called: WebApp front-end development of soft keyboard and position:fixed for us to bring inconvenience
I think the summary is quite good, but unfortunately, through the exchange of learning quickly have a better and more perfect solution, but also from the Safari native control implementation, the code is simple
High-efficiency, hardware-accelerated system-level controls that are simple and uncomplicatedOverflow-y:auto;-webkit-overflow-scrolling:touch;
The code is rarely simple, but we can replace the WebApp front-end development framework used to solve the iOS soft keyboard and fixed issues Iscroll
The Iscroll framework's consumption and whatever it does solves our problems, but at the same time brings us a lot of sequelae and trouble with code handling.
-webkit-overflow-scrolling comes from the implementation of the Safari native control, which works by creating a uiscrollview on the container with this property, which is applied to the element and used as the render object. So that we can experience a smooth touch screen slide
The results on iOS are very satisfying, and the conflict between Web slide and area sliding is equally well solved.
After the idea, the position is fixed hanging and rolling element separation code display<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><title>-webkit-overflow-scrolling</title><MetaCharSet= "Utf-8" /><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no" /><style>Html,body{Height:100%;overflow-y:Auto;-webkit-overflow-scrolling:Touch;}Body{position:relative;font-size:16px;}*{padding:0;margin:0;}header,footer,section{background:#eee;position:Absolute;Top:0; Left:0; Right:0;Line-height:50px;text-align:Center;}Footer{Top:Auto;Bottom:0;} Section{padding:15px 0;overflow-y:Auto;background:#fff;Top:50px;Bottom:50px;-webkit-overflow-scrolling:Touch;}</style></Head><Body><Header>Head</Header>< Section>Body</ Section><Footer>Bottom</Footer></Body></HTML>
One might ask why the HTML and body are also added, and whether this two-bit is necessary to give this attribute
Scene Show:HTML and body are added
Neither HTML nor body is added or only one
The former is much less likely to trigger a page slip than the latter, try it yourself
Disadvantages of-webkit-overflow-scrollingIt certainly has its own shortcomings, since the creation of system-level controls will inevitably have memory consumption, but compared to the use of a framework of its cost-effective self-evident
The performance on Android is also unsatisfactory, so we're just using it to replace the work of the development framework Iscroll previously prepared to optimize the iOS experience
Landlord for-webkit-overflow-scrolling cognition time is very short, blog views may not be enough comprehensive, welcome you to help complement the perfectExperience excellent touch-screen web development accelerated swipe and rebound
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
