Explain overflow scrolling in detail to solve the rolling jam problem



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.

Compatible writing

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!

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]