Mobile elastic sliding and sliding out-of-bounds solutions

Mobile elastic sliding and sliding out-of-bounds solutions

　　Mobile development will often encounter two problems, sliding is not sensitive, where to go to the slide, which is often said: elastic sliding. In one is the mobile development in the real machine will often encounter sliding out of bounds to see the background of the browser, this is very common. Let's make a summary of these questions first:

The first thing to understand is two concepts.

1. Global Swipe:

Scroll bars at the body node or higher.

2. Partial scrolling

The scroll bar is on one of the DOM nodes below the body node. For example: The page has a head and a bottom fixed.

Figuring out these two concepts also means that the solution to these problems on Android and iOS is different.

First, the problem of sliding is not smooth:

　　iOS: Global scrolling: Default support

Local scrolling: Default no scroll bar, Bing and sliding will be more dry.

The workaround for iOS is body{    -webkit-overflow-Scrolling:touch;} /*  */dom{    Overflow:auto;}

It is recommended to hang the property on the body, you can constipation a lot of strange bugs.

　　Under Android:

Second, rolling out of bounds

First of all, several out-of-bounds scrolling situations

　Under iOS:

A, the solution in the partial scrolling is:

The above code is the core idea of this component, that is, at the beginning of the scroll to judge: If it is the top of the page to scroll down 1px, if the bottom of the page, let's scroll up 1px.

Local scrolling must have fixed areas such as the bottom or the top, and they sometimes slide back out of bounds, the solution is: the fixed area of the page prohibits touchmove default events.

<div onTouchmove={this.touchmove.bind(this)} ></div>touchmove(event){  event.stopPropagation();  event.nativeEvent.stopImmediatePropagation();}

B, Global scrolling:

　　

There is no solution yet, so to avoid this, you can change the global scrolling to a local scrolling layout. This is implemented in many ways.

The local scrolling of Android is a pain in the egg

The local scrolling of Android will cause the scroll bar to display not smooth, and scrolling is not smooth. So it is recommended that Android just use global scrolling.

The idea of local scrolling changing to global scrolling under Android is:

Several ways to smooth scrolling

1, the Body Plus

-webkit-overflow-scrolling:touch;

2, use local scrolling as far as possible under iOS.
3, iOS introduced Scrollfix to avoid out of bounds.
4. Use global scrolling as much as possible under Android.
A, try not to overflow:auto;
b, the use of min-height:100%; instead of height:100%;
5. Do not set the background color for nodes with scroll bars and Position:absolute under iOS.

Mobile elastic sliding and sliding out-of-bounds solutions