-webkit-overflow-scrolling and rolling bounce effect.

Reference Source: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

Https://www.w3cways.com/1988.html

The-webkit-overflow-scrolling is used to control whether an element uses a scrolling rebound effect on a mobile device.

The cause of the accident

To do have a lot of lists of pages, and then do not apply iscroll such as scrolling plug-ins, finished did not press after, the sliding list of the stutter, was, so that the slide is too uncomfortable for people.

Online search, found a new property,-webkit-overflow-scroll, tyranny "the disease." I deft on hand set body set on-webkit-overflow-scrolling:touch, Yo West, page scrolling up more comfortable, no longer is the lag (test machine iphone6s). On MDN search for the compatibility of this property, a little disappointed that the iOS system is now supported. It doesn't, at least, add this experience to make the iOS user experience a bit better.

Take value

-webkit-overflow-scrolling:auto  |  Touch

Auto: Normal scrolling, when the finger moves away from the touchscreen, the scroll stops immediately

Touch: Roll back effect, when the finger moves from the touch screen, the content will remain in the scrolling effect for a period of time, the speed of continued scrolling and the duration and the intensity of the scrolling gesture is proportional. A new stack context is also created.

Recommended wording

Here are the compatible Android and iOS formulations

Over-flow:auto;      /*  */-webkit-overflow-scrolling:touch    ; /* */

Scope of application

I usually write the page when the use of this property is the case.

1, generally is the page to scroll, and then do not use some rolling plug-in

2, the pop-up window content is too long, at this time need to scroll display, then add this attribute, scrolling up experience greatly improved.

Problems using the process

1, I in non-BODY element, add this attribute, unexpectedly has no effect. If you add the overflow-y: scroll, you can scroll gracefully.

2, when an element set over position:absolute|relative, and then increase the-webkit-overflow-scrolling:touch; After the properties, you will find that the scrolling area will be jammed a few times, not sliding, Then add an Z-index value to the element.

Workaround:

Add a Z-index value to an element

Webkit-overflow-scrolling:touch;position:absolute;z-index:1;

-webkit-overflow-scrolling and rolling bounce effect.