There is a period of time has been tossing the mobile page elastic scrolling of various problems, do a bit of research, today do a little share ~
The traditional PC side, the child container height exceeds the parent container height, usually uses the Overflow:auto can appear the scroll bar drag display overflow content, but in the mobile web development, because the browser manufacturer's system differs, the version is different, causes some models not to support to the elastic scroll, thus in the development produces so-called BUG.
In the case of PC-side, we can use position:fixed and Overflow:auto to make simple layout to achieve the effect we need, and the problems on the phone side are as follows:
The most serious result is that scrolling area content cannot be dragged
There are 2 layout methods that can be overridden for issues that do not support position:fixed iOS4 and android2.2.Layout One: Define the overall height of the page as 100%, then use the Position:absolute layout to resolve
/*<!--Absolute Layout [[--><body><div class= "wrap" > <div class= "header" >header</div> <div class= "main" > elastic Scrolling area </div> <div class= "Footer" >footer</div></ div></body><!--Absolute Layout]]-->*/html,body{height:100%;}. wrap{width:100%;}. Header,.footer{height:40px;line-height:40px;background-color: #D8D8D8; text-align:center;}. header{position:absolute;top:0;left:0;width:100%;}. footer{position:absolute;bottom:0;left:0;width:100%;}. main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}Layout Two: define the overall height of the page as 100%, then use the Display:flex layout to solve
/*<!--Flex Layout [[--><body><div class= "wrap" > <div class= "header" >header</div> <div class= "main" > elastic Scrolling area </div> <div class= "Footer" >footer</div></ div></body><!--Flex Layout]]-->*/html,body{height:100%;}. wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;- webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}. Header,.footer{height:40px;line-height:40px;background-color: #D8D8D8; text-align:center;}. main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}For how to use elastic scrolling, there is no best solution, the specific look at the product user groups, product positioning, etc., a brief introduction:
Scenario One: Overflow:auto and-webkit-overflow-scrolling:touch
Suitable scene: The user group of the product is mostly ios5+, android4+ user, the suggestion uses overflow-scrolling to do the difference experience, after all Iscroll4.js under the Android machine experience is not smooth, moreover also loaded the 10K many JS code.
Overflow:auto is useful in Winphone8 and android4+. The ios5+ version adds a new attribute: overflow-scrolling This property activates smooth scrolling and works well.
. css{overflow:auto;/* Winphone8 and android4+ */-webkit-overflow-scrolling:touch;/* ios5+ */}Scenario two: Iscroll4.js and Overflow:auto
Suitable scenario: The product user base has iOS and most android2+ users, and the page data in Android is relatively simple (usually elastic scrolling data only text), then the use of iscroll4.js can ensure that the android2+ machine display normal and not lag, Let iOS users scroll more smoothly.
Once wrote "Use Iscroll.js to solve the problem of iOS4 does not support position:fixed," using iscroll4.js basically solved the page elastic scrolling problem, summed up the Iscroll4.js experience:
So the solution here is that the page is initialized with the Weibit browser enabled Iscroll4.js
<div class= "wap Ie-ova" id= "" ><!--WebKit user set ID is iscroll, enable Iscroll-to- ...</div>
Winphone8 Mobile phone Use the following hack
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { . Ie-ova{overflow:auto;}/* Winphone8 */}Scenario Three : Iscroll4.js and Overflow:auto and Android2x.css .
Scenario: The product's user base has iOS and most android2+ users, while in Android page data is more complex (usually elastic scrolling data has a large number of images), then the android2+ machine can be used for static positioning (position:static), The page does not have scrolling effect, and iscroll4.js is still used for iOS users.
<link rel= "stylesheet" href= "Android2x.css" ><!--android2+ User-referenced CSS file--
. css{overflow:auto;/* Winphone8 and android4+ */}<div class= "WAP" id= "" ><!--iOS user setting ID is iscroll, enable Iscroll-to- ...</div>
3 Scenarios for mobile Web pages that support elastic scrolling
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
