Mobile terminal development — on local area set rolling summary | of actual combat series

Setting the height of the element that needs to scroll and adding an overflow-y:scorll will naturally allow scrolling. However, after adding this property, it is normal to use Chrome or other browser tools to debug. But scrolling on a mobile phone is weird, and it feels like a stutter. Using a property at this point solves the problem. -webkit-overflow-scrolling:touch causes the scrolling to bounce back.

This attribute is defined in MDN as follows:

– The webkit-overflow-scrolling attribute controls whether elements are scrolling back on the mobile device. Auto: normal scrolling stops when the finger is removed from the touch screen. Touch: Scroll with a rebound effect. When the finger is removed from the touch screen, content continues to scroll for a while. The speed and duration of continued scrolling is proportional to the intensity of the scrolling gesture. A new stack context is also created.

However, is this property set and that’s it? This is not always the case. In fact, there are some holes in this property.

Occasionally it gets stuck or won’t slide

Some of the more common problems are:

• On Safari, the page occasionally stuck after using -webkit-overflow-scrolling:touch.

• In Safari, the scrollbar doesn’t scroll when you click on another area and then slide in the scrollarea.

• The bug where you can’t slide at all by dynamically adding content to open the container.

You can see other people have the same problem on the Internet.

For the occasional stuck problem, there’s a lot of talk on the Internet about how to solve the problem, like adding a Z-index if it doesn’t move.

After many attempts, this statement has never solved the problem. This can spread if the user is experiencing -webkit-overflow-scrolling:touch scrolling or hierarchical scrolling. Therefore, the scheme is not applicable.

Here are some good solutions:

Ensure that no positioning is set on elements that use this attribute

If you occasionally get stuck, do not set the position on the element using this property or manually set the position to static. This will solve some of the page scrolling bugs caused by positioning (relative, fixed, absolute).

But continue to fingers slipping sliding to the top, or bottom continue to slip up, will trigger a stuck problem (in fact is the entire page and springback), said he is a bug, is actually ios8 features above, if the scroll area bigger, users don’t think this is a bug, if small, user may don’t know what happened and stuck.

If the page cannot scroll with dynamic content, make the child height+1

If you want to dynamically add content to the -webkit-overflow-scrolling:touch elements to open the container and trigger scrolling, it’s buggy and the page freezes.

1. Add 1% or 1px height to the next child of the Webkit-overflow-scrolling :touch attribute. The Scrollbar is actively triggered.

main-inner {
    min-height: calc(100% + 1px)
}
Copy the code

Why is there this bug that gets stuck

– this bug was created over ios8 (not sure, but on ios5~7 you need to manually turn on hardware acceleration using translateZ(0))

Safari uses native scrolling controls for overflow-scrolling. For pages that have -webkit-overflow-scrolling, a UIScrollView is created that provides the sublayer for the rendering module to use.

-webkit-overflow-scrolling: displays other pits in touch

In addition, this property has a number of bugs, including but not limited to the following:

• The scrollTop property does not change during scrolling

• Gestures trigger element scrolling through other elements

• Pause other transitions while scrolling

The last

-webkit-overflow-scrolling:touch is fine if the scrolling is not too large, but if the scrolling is too large, better scroll should be used for mobile scrolling.