Wie man damit umgeht, dass WeChat das Herunterscrollen zum Anzeigen von URLs verbietet

Sie können die URL anzeigen, wenn Sie auf WeChat zugreifen. Dies ist eine der Sicherheitsrichtlinien von WeChat und ein benutzerfreundliches interaktives Erlebnis. In diesem Artikel wird hauptsächlich beschrieben, wie Sie die Pulldown-Anzeige von URLs auf WeChat deaktivieren können Ich kann darauf verweisen. Ich hoffe, es hilft allen.

Wirkungsprinzip:

Der elastische WeChat-Dropdown-Effekt ist tatsächlich eine Funktion des Browsers selbst, und der Fokus ist eine Manifestation des Bildlaufwerts

Verarbeitungsstrategie:

1. Touchmove-Ereignisse auf der mobilen Seite direkt verbieten

Diese Strategie ist allgemein anwendbar, wenn die Seite nur einen Bildschirm hat und dies auch tut kein Pulldown erforderlich;

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

Nachteile: Bei Bildschirmen unterschiedlicher Größe muss berücksichtigt werden, dass der Inhalt auf einem Bildschirm angezeigt werden kann, andernfalls der Inhalt auf 2+ Bildschirmen ist nicht lesbar;

2. Deaktivieren Sie Touchmove und beurteilen Sie, ob die Scroll-Position den oberen Rand erreicht, wenn Sie nach unten ziehen <= 10 Deaktivieren Sie das Touchmove-Ereignis und betrachten Sie die Situation, in der zuerst nach oben und dann nach unten gezogen wird. Überwachen Sie daher das Touchend-Ereignis und berechnen Sie die höchste Punktposition in einem Touch-Ereignisstrom, um

<🎜 zu bestimmen >
Nachteile: Es gibt Lücken im ersten Touchmove und es gibt auch Lücken im Touchmove-Prozess

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();
    }
  });
}

3 >Auf 0 zurücksetzen, wenn die Höhe der Bildlaufleiste kleiner als 0 ist, und die Rückkehr zur oberen Position erzwingen

Nachteil: Es wird ein Dropdown-Menü angezeigt URL-Splash-Screen-Phänomen

Verwandte Empfehlungen:

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

http in node.js Einführung in Module und URL-Module

Ausführliche Erklärung der Änderung der Stammadresse von url() in Laravel

Wie PHP chinesische Zeichen in URL analysiert

Das obige ist der detaillierte Inhalt vonWie man damit umgeht, dass WeChat das Herunterscrollen zum Anzeigen von URLs verbietet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!