JavaScript implementiert die Deaktivierung des Pulldown-Rebound-Effekts des WeChat-Browsers-js-Tutorial-php.cn

JavaScript implementiert die Deaktivierung des Pulldown-Rebound-Effekts des WeChat-Browsers

韦小宝

Freigeben： 2018-03-07 18:01:31

Original

3550 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die JavaScript-Methode zum Deaktivieren des Pulldown-Rebound-Effekts des WeChat-Browsers vorgestellt. Sie hat einen gewissen Bezug und ist für das Erlernen von JavaScript von Nutzen . Schauen Sie sich diesen Artikel an

Das Beispiel in diesem Artikel zeigt Ihnen die Wirkung von JavaScript, das den Pulldown-Rebound im WeChat-Browser verhindert. Der spezifische Inhalt ist wie folgt

Methode 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>

Nach dem Login kopieren

Vor- und Nachteile dieser Methode:
Vorteile: unterstützt lokales Scrollen; >
Nachteile: Durchsuchen Das Scrollen, das außerhalb der Seite des Browsers selbst erscheint, ist deaktiviert und muss in teilweises Scrollen geändert werden, und die Klasse „Scroll“ muss dem lokalen Scrollbereich hinzugefügt werden.
Hinweis: Wenn es mehrere Teil-Scrolls auf derselben Seite gibt, müssen Sie

overscroll(document.querySelector(&#39;.scroll&#39;);

Nach dem Login kopieren

ändern Für

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

Nach dem Login kopieren

Methode 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>

Nach dem Login kopieren

Vor- und Nachteile von Diese Methode:

Vorteile: Unterstützt das Scrollen über die Seite hinaus im Browser
Nachteile: Unterstützt kein lokales Scrollen

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Deaktivierung des Pulldown-Rebound-Effekts des WeChat-Browsers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!