WeChat で下にスクロールして URL を表示できない場合の対処方法

WeChat でプルダウンすると URL が表示されます。これは WeChat のセキュリティ ポリシーの 1 つであり、ユーザーフレンドリーなインタラクティブなエクスペリエンスです。この記事では主に、必要な友人がプルダウンを表示できるようにする方法を紹介します。皆さんの参考になれば幸いです。

効果の原則:

WeChat ドロップダウンの弾性効果は実際にはブラウザ自体の機能であり、フォーカスはスクロール値の表現です。

処理戦略:

1.モバイル側の touchmove イベント

この戦略は、ページに 1 つの画面しかなく、プルダウンが必要ない場合に一般的に適用されます

var touch1 = function(){
  document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) { 
    e.preventDefault(); 
  });
}

欠点: 異なるサイズの画面の場合、次のことを考慮する必要があります。コンテンツは 1 つの画面に表示できますが、それ以外の場合は 2 つ以上の画面に表示されません。

2. touchmove を無効にし、スクロール位置が一番上に達するかどうかを確認します。

var touch2 = function () {
  var lastY;//最后一次y坐标点
  var betterY;//每次touch最高点
  document.querySelector(‘body‘).addEventListener('touchstart', function(event) {
    lastY = event.originalEvent.changedTouches[0].clientY;
    betterY = lastY;
  });
  document.querySelector(‘body‘).addEventListener('touchmove', function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    if(y > betterY){
      betterY = y;
    }
    var st = document.body.scrollTop; //滚动条高度
    if (y >= lastY && st <= 10) {
      lastY = y;
      event.preventDefault();
    }
    lastY = y;
  });
  document.querySelector(‘body‘).addEventListener(&#39;touchend&#39;, function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    var st = document.body.scrollTop; //滚动条高度
    if(y < betterY && st <= 10){
      event.preventDefault();
    }
  });
}

デメリット: 最初の touchmove には抜け穴があり、touchmove プロセスにも抜け穴があります

3. スクロールのスクロール イベントを監視します。禁止された高さ

スクロール バーの高さが 0 未満の場合は常に 0 にリセットします。 、強制的にトップの位置に戻ります

var touch3 = function () {
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top <= 0){
      document.body.scrollTop = 0;
    }
  }
}

短所: ドロップダウン URL スプラッシュ スクリーン現象が発生します

関連する推奨事項:

node.js の http モジュールと URL モジュールの紹介

Laravelのurl()のルートアドレス変更の詳しい説明

phpがurl内の漢字をどのように解析するか

以上がWeChat で下にスクロールして URL を表示できない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。