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

參考:微信中打開網頁，下拉會顯示網頁由XXX提供，但是有些網頁卻沒有，不同平臺不同手機也不一樣，這是什么原因？http://www.php.cn/html5-tutorial-113115.html

$(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導致頁面無法滾動的解決方法https://www.cnblogs.com/lvmingyin/p/5372678.html

當在移動端上點擊屏幕時，會依次觸發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提供”?(使用慣性滑動可解決，但暫未解決，有解決的歡迎隨時call)
• 對于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始終為0var 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); })

?

總結

以上是生活随笔為你收集整理的微信中禁止网页下拉出现网页由XXX提供的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。