微信中禁止網頁下拉出現"網頁由XXX提供"

最近在開發過程當中遇到新的需求：在微信公衆號中禁止下拉出現我司域名，微信公衆號中的域名是由微信內置瀏覽器根據網址自動讀取，暫時不支持自定義功能。在沒法更改的前提下，想到了禁止頁面下拉的方法。因而有了如下代碼：

參考:微信中打開網頁，下拉會顯示網頁由XXX提供，可是有些網頁卻沒有，不一樣平臺不一樣手機也不同，這是什麼緣由？

$(document).ready(function(){  
    function stopScrolling( touchEvent ) {   
        touchEvent.preventDefault();   
    }  
    document.addEventListener( 'touchstart' , stopScrolling , false );  
    document.addEventListener( 'touchmove' , stopScrolling , false );  
});
複製代碼

【注】

• 此方法對於IOS 10.X.X版本以上不起做用
• 此方法做用於單頁不可滑動，若需單頁面滑動推薦使用下面的方法

這樣確實能夠解決禁止下拉問題，但會出現新的問題【頁面a連接跟click 事件沒法觸發】，so,去掉了touchstart事件。

具體緣由以下：

參考：移動端touch事件影響click事件以及在touchmove添加preventDefault致使頁面沒法滾動的解決方法

當在移動端上點擊屏幕時，會依次觸發touchstart,touchmove,touchend,click事件。正確的觸發過程應該是：

touchstart→touchmove→touchend 或者 touchstart→touchend→click。

若是在點擊屏幕的時候手指滑動的話，是不會觸發click事件的。

• 若是有須要用到touch事件作的特效必定要在touchstart或者touchmove中添加event.preventDefault()方法。
• 在touchstart中若是有event.preventDefault()方法， 將不會觸發click事件和a標籤方法。在這裏可使用tap代替click，可是a標籤的話就不太方便了。
• 若是在touchmove中有event.preventDefault()方法，最好加上方向判斷，固然若是你頁面內容不須要滾動條就不須要加判斷了。

然鵝，還會出現問題【列表頁中仍是會出現下拉現象】，也就是說沒起到做用。

• 不能直接在html或者body上添加該方法
• 但有個bug：若是快速上滑再下滑，仍是會出現「網頁由XXX提供」
• 對於IOS 10.X.X版本以上的建議採用此方法
• 若須要單頁面滑動推薦使用此方法

$(document).ready(function(){
	var app=document.getElementById("app");
	var touchstartY;
	app.addEventListener("touchstart",function(event){
		var events=event.touches[0]||event;
		touchstartY=events.clientY;//獲取觸摸目標在視口中的y座標
	},false);
	
	app.addEventListener("touchmove",function(event){
		var events=event.touches[0]||event;
		//注意document.body.scrollTop始終爲0
		var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//獲取滾動部分的高度
		var clientHeight=document.documentElement.clientHeight;//獲取手機屏幕高度（可視部分高度）
		var scrollHeight=document.body.scrollHeight;//全部內容的高度
		if(events.clientY>touchstartY&&scrollTop===0&&event.cancelable){
			event.preventDefault();//禁止到頂下拉
		}else if(scrollTop+clientHeight>scrollHeight&&event.cancelable){
			event.preventDefault();//禁止到底上拉
		}
	},false);
})
複製代碼