Detailed solution of scrolling carton on webapp pages

Time:2019-3-21

When mobile browsers scroll through the current page (or possibly zoom pages), the default behavior is blocked, resulting in the page being forced to remain static, resulting in poor user experience and a sense of pause in scrolling pages.

Specific explanation: Because the cancelable property of the touchstart event object is true, that is to say, its default behavior can be prevented by the listener through the preventDefault () method. But browsers can’t know in advance whether a listener will call preventDefault (). All it can do is wait for the listener to execute the default behavior. The listener execution is time-consuming, some even time-consuming, which will lead to page jamming. Even if the listener is an empty function, there will be a certain degree of Katon, after all, the execution of empty functions will be time-consuming.

UseCapture parameter of addEventListener

Basic concepts: xxx. addEventListener (‘event name’, function (xxx) {xxx}, useCapture).

The first parameter represents the name of the event (excluding on, such as “click”); the second parameter represents the function to receive event processing; and the third parameter is useCapture.

Now let’s see what this thing means. It’s more intuitive to give a direct example.

<div id="level1">
  <div id="level2">
    <div id="level 3"> click here </div>.
  </div>
</div>
<div id="info">
</div>

var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var level3= document.getElementById("level3");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "<br>"; }, false);

From the above code, we can see the effect of this useCapture for true and false:

When all false, the trigger sequence is: level 3, level 2, level 1.
When all true, the trigger order is: level 1, level 2, level 3.
When level1 is true and others are false, the triggering sequence is level1, level3 and level2.
When level2 is true and others are false, the triggering order is level2, level3, and level1.
When level3 is true and others are false, the triggering sequence is level3, level2 and level1.
When level1 is false and others are true, the triggering sequence is level2, level3, and level1.
When level2 is false and others are true, the triggering sequence is level1, level3, and level2.
When level3 is false and others are true, the triggering sequence is level1, level2, and level3.

From the above results, the following conclusions can be drawn:

True is always triggered before false.
If multiple are true, the trigger of the outer layer precedes that of the inner layer.
If multiple are false, the inner trigger precedes the outer trigger.

Passive attributes control event behavior

The method of use is as follows.

AddEventListener ('Event Name', function (xxx) {xxx},{
    capture: false,
    passive: false,
    once: false
})

All three attributes are Boolean switches with false defaults.

Capture: Equivalent to the previous useCapture parameter;
Once: This means that the listener is one-time and is automatically removeEventListener after one execution.
Passive: touch events for webapp

It is understood that when mobile browsers use events, 80% of the scroll event listeners will not prevent default behavior, that is to say, in most cases, the browser is waiting in vain. So passive listener was born, passive means “obedient”, which means it will not say no to the default behavior of events. Browser knows that a listener is passive, and it can execute JavaScript code in the listener and default behavior of browser in two threads at the same time.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.