Comment gérer le fait que WeChat interdit le défilement vers le bas pour afficher les URL

Vous pouvez afficher l'URL lorsque vous déroulez sur WeChat, ce qui est l'une des politiques de sécurité de WeChat et une expérience interactive conviviale. Cet article explique principalement comment désactiver l'affichage déroulant des URL sur WeChat. je peux m'y référer. J'espère que cela aidera tout le monde.

Principe de l'effet :

L'effet élastique déroulant WeChat est en fait une fonctionnalité du navigateur lui-même, et le focus est une manifestation de la valeur de défilement

Stratégie de traitement :

1. Interdire directement les événements touchmove côté mobile

Cette stratégie est généralement applicable lorsque la page n'a qu'un seul écran et qu'elle en dispose ; ne nécessite pas de menu déroulant ;

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

Inconvénients : Pour les écrans de différentes tailles, il faut considérer que le contenu peut être affiché sur un seul écran, sinon le contenu sur 2+ écrans, il ne sera pas lisible ;

2. Désactivez le déplacement tactile et jugez si la position de défilement atteint le haut

Considérez si la barre de défilement atteint le haut lorsque vous tirez vers le bas <= 10 à ; désactivez l'événement touchmove et considérez la situation de tirer d'abord vers le haut puis vers le bas, alors surveillez l'événement touchend et calculez la position du point le plus élevé dans un flux d'événement tactile pour déterminer

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

Inconvénients : Il y a des failles dans le premier touchmove, et il y a aussi des failles dans le processus touchmove

3 Écoutez l'événement de défilement et interdisez la hauteur de

<🎜. >Remettre à 0 chaque fois que la hauteur de la barre de défilement est inférieure à 0 et forcer le retour en position haute

Inconvénient : Il y aura une liste déroulante Phénomène d'écran de démarrage d'URL

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

Recommandations associées :

http dans node.js Introduction aux modules et aux modules d'URL

Explication détaillée de modifier l'adresse racine de url() dans Laravel

Comment PHP analyse les caractères chinois dans l'url

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!