Wechat browser prohibits the page from scrolling down to view the URL (does not affect the scroll inside the page)

This type of event is the default event behavior of mobile phone touchmove, and the event can be hidden through js code:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
or
document.body.addEventListener('touchmove', function(e) {e.preventDefault();},false);

 But this often removes the native scroll effect of the page. The following code can perfectly solve this problem:

var overscroll = function(el) {
  el.addEventListener('touchstart', function() {
    var top = el.scrollTop
      , totalScroll = el.scrollHeight
      , currentScroll = top + el.offsetHeight;
    //If we're at the top or the bottom of the containers
    //scroll, push up or down one pixel.
    //
    //this prevents the scroll from "passing through" to
    //the body.
    if(top === 0) {
      el.scrollTop = 1;
    } else if(currentScroll === totalScroll) {
      el.scrollTop = top - 1;
    }
  });
  el.addEventListener('touchmove', function(evt) {
    //if the content is actually scrollable, i.e. the content is long enough
    //that scrolling can occur
    if(el.offsetHeight < el.scrollHeight)
      evt._isScroller = true;
  });
}
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
  //In this case, the default behavior is scrolling the body, which
  //would result in an overflow.  Since we don't want that, we preventDefault.
  if(!evt._isScroller) {
    evt.preventDefault();
  }
});

Author: I am No. 7_frank
Link: https://www.jianshu.com/p/2eddee561971
Source: Jianshu
Copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.