Phenomenon:
Using iphone6 plus, iphone7 plus, iphone6s plus, pull up to retrieve the product page. The page displays one page for every 20 products. After reaching the end, pull up to load the product data of the next page. Quickly think about sliding. After sliding a certain number of pages (depending on the situation), the page will occasionally become sticky and cannot be slid. This doesn't happen every time.
The page is a single-page application constructed using react.js.
Question:
The positioning point of the problem is somewhat unclear now
(1) Judging from the current situation, this problem does not occur on the Android side, only on the ios side. Is it because of the ios system? There will be this sticky problem;
(2) It needs to be flipped to a certain number of pages before this happens, but it is not very likely;
(3) The composition of the scrolling page dom is p p It does not use the popular p ul li tag to construct the scrolling page dom. Is there any hidden problem in using p p method?
(4) Use react.js to render the page. Is it caused by improper use? This kind of page sticky situation is caused by JavaScript processing;
If you have encountered and solved the above problems, please help.
黄舟2017-06-30 09:58:35
This situation should be caused by using the -webkit-overflow-scrolling:touch attribute. Webview will add a layer to the element with this attribute added for rendering. However, not using this attribute will cause the page to be unsmooth, so my current solution is to use the transfrom plug-in to simulate scrolling, which does not require the -webkit-overflow-scrolling:touch attribute. However, the disadvantage is that there are big performance problems and frame freezes;
给我你的怀抱2017-06-30 09:58:35
-webkit-overflow-scrolling:touch is a problem with this attribute. My solution is to remove it and use the scroll bar that comes with the body