[Original] Three solutions for mobile web pages supporting elastic scrolling

For some time, I have been tossing about various problems of Mobile Page Auto-rolling. I did some research. Today I will share a little bit ~

In traditional PCs, the height of sub-containers exceeds the height of the parent container. Generally, overflow: auto can be used to display the overflow content by dragging the scroll bar. in mobile web development, because browser vendors have different systems and versions, some models do not support elastic scrolling, thus creating so-called bugs in development.

 

In PC, position: fixed and overflow: auto can be used for simple layout to achieve the desired effect. The problems encountered on mobile phones are as follows:

• Android2.3 or lowerOverflow: auto is not supported.

The most serious result is that the scrolling area content cannot be dragged.

Layout 1: define the overall page height to 100%, and then use the position: absolute layout to solve the problem.

{:;}{:;}{:;:;:;:;}{:;:;:;:;}{:;:;:;:;}{:;:;:;:;:;:;}

 

Layout 2:Define the overall page height to 100%, and then use the display: flex layout to solve the problem.

{:;}{:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;}{:;:;:;:;:;}

 

The height of the sub-container exceeds the height of the parent container, and the content of the sub-container can be elastically rolled.

There is no best solution for how to use elastic rolling. For details, refer to the user group and product positioning of the product. A brief introduction is given below:

Solution 1: overflow: autoAnd-webkit-overflow-scrolling: touch

Applicable scenarios: Most of the user groups of the product are ios5 + and android4 +. We recommend that you use overflow-scrolling for differentiated experience. After all, the experience of iscroll4.js is not smooth on android machines, in addition, more than 10 K js Code is loaded.

Overflow: the auto statement is useful in winphone8 and android4 +. The ios5 + version adds a new attribute: overflow-scrolling, which can activate smooth scrolling.

{:;:; }

 

SolutionIi. iscroll4.jsAnd overflow: auto

Applicable scenarios: the product's user groups include ios and most android2 + users, while the page data in android is relatively simple (generally, only text is supported for Elastic data scrolling ), therefore, the use of iscroll4.js can ensure that the display of Android 2 + machines is normal and smooth, so that ios users can scroll smoothly.

I have written [using iScroll. js to solve the problem that position: fixed is not supported in ios4], and using iscroll4.js basically solves the problem of page auto-scrolling. Summary The experience of iscroll4.js:

• Excellent Performance in ios and smooth scrolling
• Poor performance in some android systems, especially when there is a large amount of content in the scrolling area, the scrolling page will be stuck
• There are many bugs in ios and android systems, for example, the page height is not re-calculated after the form is highlighted and the keyboard is popped up, and a pop-up screen is displayed. (We will not discuss it here)
• Not supported by winphone

The solution here is to enable iscroll4.js when determining that it is a Weibo browser during page initialization.

{:;} 

 

Solution 3: Iscroll4.jsAnd overflow: autoand android2x.css

Applicable scenarios: the product's user groups include ios and most android2 + users, while page data in android is complicated (usually elastic scrolling data has a large number of images ), in this case, you can perform static position: static display for android2 + machines. The page does not have the scrolling effect, and iscroll4.js is still used for ios users.

{:;}

 

OK ~