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

Git branch remote connection and remote branch pull push and conflict handling

remarks: This article refers to teacher Liao Xuefeng’s blogGit tutorial。 Learn and record according to his blog. Thank him for his selfless sharing. You are also welcome to check the original text. Knowledge points Force the deletion of unconsolidated branches,git branch -D <branch-name>, the modification of the branch will be lost git remoteandgit remote -v […]