Recently, I met a new requirement in the development process: it is forbidden to pull down the domain name of our company in the wechat public account. The domain name in the wechat public account is automatically read by the built-in browser of wechat according to the url, and the customization function is not supported for the time being. In the premise that can not be changed, came up with a method to disable the page drop down. Here is the code:

Reference: When you open a web page in wechat, the drop-down list will show that the web page is provided by XXX, but some web pages are not, and different platforms and mobile phones are different, what is the reason?

$(document).ready(function() {function stopScrolling( touchEvent ) {   
        touchEvent.preventDefault();   
    }  
    document.addEventListener( 'touchstart' , stopScrolling , false );  
    document.addEventListener( 'touchmove' , stopScrolling , false );  
});
Copy the code

【 note 】

  • This method does not work with IOS 10.x. x or later
  • This method applies to a single page and cannot be swiped. If you want to swipe a single page, you are recommended to use the following method

This does solve the ban pull-down problem, but there is a new problem [page A link and click event cannot be triggered]. So, the TouchStart event is removed.

Specific reasons are as follows:

Cf: Mobile touch event affecting click event and preventDefault on TouchMove causing the page to fail to scroll

When click on mobile terminal screen, will in turn trigger touchstart, touchmove, touchend, click event. The correct triggering process should be:

Touchstart → TouchMove → TouchEnd or TouchStart → TouchEnd →click.

The click event will not be triggered if you swipe your finger while clicking the screen.

  • Be sure to add the event.preventDefault() method to either TouchStart or TouchMove if you need to use the touch event.
  • If there is an event.preventDefault() method in TouchStart, the click event and a tag method will not fire. You can use tap instead of click here, but the A tag is less convenient.
  • If you have the event.preventDefault() method on touchMove, it’s best to specify the direction, but not if your content doesn’t require a scrollbar.

However, there is still a problem [the list page will still be pulled down], that is, it does not work.

  • You cannot add this method directly to HTML or body
  • However, there is a bug: if you slide up and down quickly, there will still be a “page provided by XXX” (inertia slide can be solved, but not solved yet, welcome to call if there is a solution).
  • This method is recommended for IOS 10.X. x and later versions
  • This method is recommended for single-page sliding
$(document).ready(function(){
	var app=document.getElementById("app");
	var touchstartY;
	app.addEventListener("touchstart".function(event){ var events=event.touches[0]||event; touchstartY=events.clientY; // Get the y coordinate of touch target in viewport},false);
	
	app.addEventListener("touchmove".function(event){ var events=event.touches[0]||event; / / pay attention to the document. The body. ScrollTop always be 0 var scrollTop = document. The body. The scrollTop | | document. The documentElement. ScrollTop; / / get the height of the scrolling part var clientHeight = document. The documentElement. ClientHeight; / / phone screen height (visible part height) var scrollHeight = document. Body. ScrollHeight; // The height of all contentif(events.clientY>touchstartY&&scrollTop===0&&event.cancelable){ event.preventDefault(); // Stop pulling from top}else if(scrollTop+clientHeight>scrollHeight&&event.cancelable){ event.preventDefault(); // Disallow bottom pull}},false);
})
Copy the code