Webアプリページのスクロールが固まる場合の解決策を詳しく解説

モバイル ブラウザーが現在のページをスクロールする (ページをズームすることもある) と、デフォルトの動作がブロックされ、ページが強制的に静止したままになり、その結果、ユーザー エクスペリエンスが低下し、ページをスクロールするときに一時停止したような感覚が生じます。

より具体的な説明: touchstart イベント オブジェクトの cancelable 属性は true であるため、つまり、そのデフォルトの動作は、preventDefault() メソッドを通じてリスナーによって阻止できます。ただし、ブラウザは、リスナーがPreventDefault() を呼び出すかどうかを事前に知ることができません。リスナーの実行が完了するまで待ってから、デフォルトの動作を実行することしかできません。リスナーの実行には時間がかかり、場合によっては非常に時間がかかります。 -消費すると、ページがフリーズします。リスナーが空関数であっても、やはり空関数の実行にもある程度のラグが発生します。

基本概念: xxx.addEventListener('イベント名', function(xxx){xxx}, useCapture)。

最初のパラメータはイベント名 (click などを除く) を表し、2 番目のパラメータはイベント処理を受け取る関数を表します。

これが何を意味するのかを見てみましょう。例を直接挙げたほうが分かりやすいでしょう。

 <div id=level1> <div id=level2> <div id=level3>ここをクリックしてください</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);

上記のコードに従って、useCapture の効果を true と false として見てみましょう。

すべてが false の場合、トリガーの順序はレベル 3、レベル 2、レベル 1 になります。

すべてが true の場合、トリガー順序はレベル 1、レベル 2、レベル 3 になります。

level1 が true、その他が false の場合、トリガー順序は level1、level3、level2 になります。

level2 が true で、その他が false の場合、トリガーの順序は level2、level3、level1 になります。

level3 が true、その他が false の場合、トリガー順序は level3、level2、level1 になります。

level1 が false で、その他が true の場合、トリガーの順序は level2、level3、level1 になります。

level2 が false で、その他が true の場合、トリガーの順序は level1、level3、level2 になります。

level3 が false で、その他が true の場合、トリガー順序は level1、level2、level3 になります。

上記の結果から次の結論が導き出されます。

true のトリガー順序は常に false の前です。

複数の値が true の場合、外側のレイヤーが内側のレイヤーよりも前にトリガーされます。

複数の値が false の場合、内側のレイヤーが外側のレイヤーよりも前にトリガーされます。

使い方

 addEventListener('イベント名', function(xxx){xxx}, {キャプチャ: false, パッシブ: false, 1回: false})

3 つのプロパティはすべてブール型のスイッチであり、デフォルト値は false です。

Capture: 前の useCapture パラメータと同等。

Once: リスナーは 1 回限りであり、1 回実行されると自動的に削除されることを意味します。

パッシブ: Web アプリのタッチ イベントに使用されます

モバイル ブラウザーがイベントを使用する場合、スクロール イベント リスナーの 80% がデフォルトの動作を妨げないことがわかります。これは、ほとんどの場合、ブラウザーは無駄に待機することを意味します。したがって、パッシブ リスナーが誕生しました。パッシブとは従順を意味します。これは、ブラウザがリスナーがパッシブであることを認識すると、リスナーを 2 つのスレッドで同時に実行できることを意味します。 . JavaScript コードとブラウザのデフォルトの動作。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。