JavaScript implémente la désactivation de l'effet de rebond déroulant du navigateur WeChat

Cet article présente principalement en détail la méthode de JavaScript pour désactiver l'effet de rebond déroulant du navigateur WeChat. Il a une certaine référence et valeur pour l'apprentissage de JavaScript. Les amis intéressés par JavaScript peuvent se référer. Jetez un œil à cet article

L'exemple dans cet article partage avec vous l'effet de JavaScript interdisant le rebond déroulant sur le navigateur WeChat pour votre référence. Le contenu spécifique est le suivant

. Méthode 1 :

<script type="text/javascript"> 
  var overscroll = function(el){ 
    el.addEventListener(&#39;touchstart&#39;, function(){ 
      var top = el.scrollTop; 
      var totalScroll = el.scrollHeight; 
      var currentScroll = top + el.offsetHeight; 
      if(top === 0) { 
        el.scrollTop = 1; 
      }else if(currentScroll === totalScroll){ 
        el.scrollTop = top - 1; 
      } 
    }); 
    el.addEventListener(&#39;touchmove&#39;, function(evt){ 
      if(el.offsetHeight < el.scrollHeight){ 
        evt._isScroller = true; 
      } 
    }); 
  } 
  overscroll(document.querySelector(&#39;.scroll&#39;));//哪里需要可以局部滚动，添加一个“scroll”的class 
  document.body.addEventListener(&#39;touchmove&#39;, function(evt) { 
    if(!evt._isScroller){ 
      evt.preventDefault(); 
    } 
  }); 
</script>

Avantages et inconvénients de cette méthode :
Avantages : prend en charge le défilement local
Inconvénients : navigation. Le défilement qui apparaît au-delà de la page de l'appareil lui-même est désactivé et doit être modifié en défilement partiel, et la classe "scroll" doit être ajoutée à la zone de défilement locale.
Remarque : S'il y a plusieurs défilements partiels sur la même page, vous devez modifier

overscroll(document.querySelector('.scroll');

Pour

for(var i=0;i<document.querySelectorAll(&#39;.scroll&#39;).length;i++){
overscroll(document.querySelectorAll(&#39;.scroll&#39;)[i]);
}

Méthode 2 :

<script type="text/javascript"> 
  function stopDrop(){ 
    var lastY;//最后一次y坐标点 
    $(document.body).on(&#39;touchstart&#39;, function(event) { 
      lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。 
    }); 
    $(document.body).on(&#39;touchmove&#39;, function(event) { 
      var y = event.originalEvent.changedTouches[0].clientY; 
      var st = $(this).scrollTop(); //滚动条高度  
      if (y >= lastY && st <= 10) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。 
        lastY = y; 
        event.preventDefault(); 
      } 
      lastY = y; 
    }); 
  } 
</script>

Avantages et inconvénients de cette méthode :

Avantages : Prend en charge le défilement au-delà de la page dans le navigateur
Inconvénients : Ne prend pas en charge le défilement local

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!