JavaScript implements disabling the pull-down rebound effect of WeChat browser-JS Tutorial-php.cn

JavaScript implements disabling the pull-down rebound effect of WeChat browser

韦小宝

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

Original

3513 people have browsed it

This article mainly introduces in detail the method of JavaScript to prohibit the pull-down rebound effect of WeChat browser. It has certain reference and value for learning JavaScript. Friends who are interested in JavaScript can refer to it. Take a look at this article

The example in this article shares with you the effect of JavaScript prohibiting pull-down rebound on WeChat browser for your reference. The specific content is as follows

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

Copy after login

The advantages and disadvantages of this method:
Advantages: Support local scrolling;
Disadvantages: The browser itself The scrolling that appears beyond the page is disabled and needs to be changed to partial scrolling, and the "scroll" class needs to be added to the local scrolling place.
Note: If there are multiple partial scrolls on the same page, you need to change

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

Copy after login

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

Copy after login

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

Copy after login

Advantages and disadvantages of this method:
Advantages : Supports scrolling of the browser itself beyond the page
Disadvantages : Does not support local scrolling

The above is the detailed content of JavaScript implements disabling the pull-down rebound effect of WeChat browser. For more information, please follow other related articles on the PHP Chinese website!