If you use the overflow: scroll attribute on a div or module, there will be an obvious jamming phenomenon when browsing on the mobile phone of IOS system. However, this problem will not occur on Android phones.
The following code can solve this kind of stuck problem: – WebKit overflow scrolling: touch;, Because this line of code enables the hardware acceleration feature, the sliding is very smooth. This method can really solve IOS 5 0、android4. The sliding Caton problem of the system after 0.
-webkit-overflow-scrolling: auto | touch;
Auto: normal scrolling. When the finger is removed from the touch screen, the scrolling stops immediately
Touch: rolling rebound effect. When the finger is removed from the touch screen, the content will maintain the rolling effect for a period of time. The speed and duration of continuous rolling are directly proportional to the intensity of rolling gesture. A new stack context is also created.
over-flow: auto; /* Winphone8 and Android 4 +*/ -webkit-overflow-scrolling: touch; /* ios5+ */
1. If you add this attribute but it doesn’t work, you can add overflow-y: scroll.
2. When position: absolute | relative is set for an element, add – WebKit overflow monitoring: touch; Property, you will find that after sliding several times, the scrolling area will get stuck and cannot slide. At this time, you can add a Z-index value to the element.
This is the end of this article about explaining overflow scrolling to solve the rolling jam problem. For more information about overflow scrolling, please search for previous articles of developpaer or continue to browse the relevant articles below. I hope you will support developpaer in the future!