Mobile elastic sliding and sliding out-of-bounds solutions

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.