Detailed explanation of overflow-scrolling to solve scrolling lag problem

Preface

If you use the overflow: scroll attribute for a div or module, there will be obvious lag when browsing on an iOS phone. However, this problem does not occur on Android phones.

Workaround

The following code can solve this lag problem: -webkit-overflow-scrolling: touch;, because this line of code enables the hardware acceleration feature, so the sliding is very smooth. This method can indeed solve the sliding lag problem of iOS5.0 and Android4.0 and later systems.

-webkit-overflow-scrolling: auto | touch;

auto: Normal scrolling. When the finger is removed from the touch screen, the scrolling stops immediately.

Touch: Scroll rebound effect. When the finger is removed from the touch screen, the content will keep scrolling for a while. The speed and duration of continued scrolling are proportional to the intensity of the scrolling gesture. A new stacking context is also created.

Compatible writing

over-flow: auto; /* winphone8 and android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

ps:

1. If adding this property does not work, add overflow-y: scroll and it will work.

2. When an element is set with position: absolute|relative and then the -webkit-overflow-scrolling: touch; attribute is added, you will find that the scrolling area will get stuck after sliding a few times and cannot slide anymore. In this case, just increase the z-index value of the element.

References: https://www.jianshu.com/p/1f4693d0ad2d

https://www.cnblogs.com/wuyinghong/p/7450041.html

This is the end of this article on how to solve the scrolling jam problem with overflow-scrolling. For more information about overflow-scrolling jam, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!