Problems that may occur when using iscroll4 (Switch: Record)

1. Within the range of the iscroll4 rolling container, no response is returned when you click form elements such as input box and select.
This problem occurs because iscroll needs to constantly listen to the user's touch operations to make the corresponding effect, so it shields other default events. The solution is, find this line in iscroll4 source code,

Onbeforescrollstart: function (e) {e. preventdefault ();}

Then change it:
Onbeforescrollstart: function (e) {var nodetype = E. explicitoriginaltarget? E. explicitoriginaltarget. nodename. tolowercase () :( e.tar get? E.tar get. nodename. tolowercase (): ''); If (nodetype! = 'Select' & nodetype! = 'Option' & nodetype! = 'Input' & nodetype! = 'Textea ') E. preventdefault ();}

In this way, as long as the touch element is select | option | input | textarea, it will not execute E. preventdefault (), and the default event will not be blocked.

If you have other elements that do not want to be blocked, you can modify them by yourself. However, it is important to note that blocking default events in onbeforescrollstart is the basis for iscroll to perform smooth scrolling, do not just remove it, or you will find it rolling.

 

2. Container flash bug when adding content to the iscroll container

When I pull and load more content, I must insert the new content into the container. At this time, I found that sometimes the container will flash, and at first I thought it was too much insert content, later, I felt that it was because float was used in the layout that led to re-rendering and finally ruled out the layout.

In fact, the focus is that iscroll uses a very advanced css3 attribute. Web WebKit may not support these attributes well.

The two attributes involved are translate3d and transitiontimingfunction. The rendering may be affected when the length of the list is changed. As a result, the page flashes and the solution is to find the source code,

Has3d = 'webkitcssmatrix 'in window & 'm11' in new webkitcssmatrix ()

Changed:
Has3d = false

And when iscroll is configured, set usetransition to false (usetransition is false by default ).

One flaw in doing so is that the rolling process is not as smooth as the original one (the original effect is really comparable to that of the native APP), but if you do not compare it, you cannot see it.

In terms of effects and experience, I prefer experience.

However, if you meet the following conditions, I still do not recommend that you change it to me as follows:

1) even if you do not modify the content, no matter how you insert it into the iscroll container, it will not flash, this situation is mostly displayed in the text list. If the list involves complex la S and images, a flash bug often occurs.

2) If your web app is simply viewed in a mobile browser. Translate3d and transitiontimingfunction are immature in IOS's uiwebview support, but safari on mobile phones is no problem at all. If you are not using a framework like phonegap to develop a hybrid app, you don't need to worry about this problem.

3) only for Android, because Android WebKit does not support translate3d at the moment, iscroll will automatically choose not to use it.

 

3. Too long scrolling content, resulting in choppy and direct app crash

To put it bluntly, iscroll is implemented using JS + css3, and the consumption of browsers is certainly considerable. Avoiding unlimited content loading is what Web products should avoid.

If this is unavoidable, we can minimize iscroll's consumption of browser memory.

1) do not use checkdomchanges. Although checkdomchanges is very convenient, it regularly checks whether the container length is changed to refresh, but it also means that you need to consume an interval memory space

2) Hide the iscroll scroll bar. Set hscrollbar and vscrollbar to false during configuration.

3) If you have to remove all effects, set momentum, usetransform, and usetransition to false.

 

4. When the left and right sides scroll, the response body cannot be pulled up or down correctly

In this case, if this slide module is only part of your page and you need to pull up or down the page to browse other content, when your finger is swiped up or down on this module, i'm afraid there will be no response. The cause is the same as problem 1, because the default event is blocked.

The perfect solution is none. if preventdefault () is removed, the scroll effect of the slide is greatly reduced, and sometimes the operations of the user to move up or down are mistakenly converted into the scroll of the slide. So in terms of the effect and experience, you should choose your own. Technically, I think it is better to communicate with products and UIS and negotiate a good solution.

The basic experience is this pull, hoping to help everyone. (Transfer)

Iscroll 4.2.5 Chinese API

Http://www.gafish.net/api/iScroll.html