微信下拉時可以查看到URL，本身是微信的一種安全策略之一，也是一種用戶交互友好的體驗；本文主要介紹微信禁止下拉查看URL的處理方法,需要的朋友可以參考下，希望能幫助大家。
效果原理：
微信下拉彈性效果其實是瀏覽器本身的特性，重點就是scroll值的一種體現；
處理策略：
1、直接禁止mobile端的touchmove事件；
這種策略一般適用頁面只有一個螢幕不需要下拉情況下使用；
var touch1 = function(){
document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) {
e.preventDefault();
});
}弊端：對於大小不同的螢幕要考慮到內容一螢幕全部顯示，不然2+螢幕的內容就沒有辦法看了；
2、禁止touchmove同時判斷scroll的位置是否到達頂部；
考慮到下拉時滾動條是否到達頂部<= 10 來禁止touchmove事件，同時考慮存在先上拉再下拉的情況所以監聽的touchend事件併計算一次touch事件流中的最高點位置用以判斷
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('touchend', function(event) {
var y = event.originalEvent.changedTouches[0].clientY;
var st = document.body.scrollTop; //滚动条高度
if(y < betterY && st <= 10){
event.preventDefault();
}
});
}弊端：第一次的touchmove存在漏洞問題，touchmove的過程中也存在漏洞
3、監聽scroll的滾動事件，禁止高度<0;
每當捲軸的高度小於0時就重置為0，強制回退頂部位置
var touch3 = function () {
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
if(top <= 0){
document.body.scrollTop = 0;
}
}
}弊端：會存在下拉URL閃屏的現象
相關推薦：
以上是微信禁止下拉查看URL如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
