How to deal with WeChat prohibiting scrolling down to view URLs

You can view the URL when you pull down on WeChat. It is one of WeChat's security policies and a user-friendly interactive experience. This article mainly introduces how to disable pull-down to view the URL on WeChat. Friends who need it can refer to it. Hope it helps everyone.

Effect principle:

The WeChat drop-down elastic effect is actually a feature of the browser itself, and the focus is a manifestation of the scroll value;

Processing strategy:

1. Directly prohibit the touchmove event on the mobile side;

This strategy is generally suitable for use when the page has only one screen and does not require pull-down;

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

Disadvantages: For screens of different sizes, it is necessary to consider that the content can be displayed on one screen, otherwise the content on 2+ screens will not be viewable;

2. Touchmove is prohibited At the same time, determine whether the scroll position reaches the top;

Consider whether the scroll bar reaches the top when pulling down <= 10 to prohibit the touchmove event, and consider that there is a situation of first pulling up and then pulling down, so the touchend event is monitored and calculated The highest point position in a touch event stream is used to determine

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

Disadvantages: There are vulnerabilities in the first touchmove, and there are also vulnerabilities in the touchmove process

3. Listen to the scroll event of scroll and prohibit height < 0;

Whenever the height of the scroll bar is less than 0, reset it to 0 and force the return to the top position

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

Disadvantages: There will be a drop-down URL splash screen phenomenon

Related recommendations:

Introduction to the http module and url module in node.js

Detailed explanation of modifying the root address of url() in Laravel

How php parses Chinese characters in the url

The above is the detailed content of How to deal with WeChat prohibiting scrolling down to view URLs. For more information, please follow other related articles on the PHP Chinese website!