微信禁止下拉查看URL的處理方法

第微信禁止下拉查看URL的處理方法場(chǎng)景：

微信下拉時(shí)可以查看到URL，本身是微信的一種安全策略之一，也是一種用戶交互友好的體驗(yàn)；

效果原理：

微信下拉彈性效果其實(shí)是瀏覽器本身的一種特性，重點(diǎn)就是scroll值的一種體現(xiàn)；

處理策略：

1、直接禁止mobile端的touchmove事件；

這種策略一般適用頁(yè)面只有一屏不需要下拉情況下使用；

vartouch1=function(){

document.querySelector(‘body‘).addEventListener(‘touchmove‘,function(e){

e.preventDefault();

}

弊端：對(duì)于大小不同的屏要考慮到內(nèi)容一屏全部顯示，不然2+屏的內(nèi)容就沒(méi)有辦法看了；

2、禁止touchmove同時(shí)判斷scroll的位置是否到達(dá)頂部；

考慮到下拉時(shí)滾動(dòng)條是否到達(dá)頂部=10來(lái)禁止touchmove事件，同時(shí)考慮存在先上拉再下拉的情況所以監(jiān)聽(tīng)的touchend事件并計(jì)算一次touch事件流中的最高點(diǎn)位置用以判斷

vartouch2=function(){

varlastY;//最后一次y坐標(biāo)點(diǎn)

varbetterY;//每次touch最高點(diǎn)

document.querySelector(‘body‘).addEventListener('touchstart',function(event){

lastY=event.originalEvent.changedTouches[0].clientY;

betterY=lastY;

document.querySelector(‘body‘).addEventListener('touchmove',function(event){

vary=event.originalEvent.changedTouches[0].clientY;

if(ybetterY){

betterY=y;

varst=document.body.scrollTop;//滾動(dòng)條高度

if(y=lastYst=10){

lastY=y;

event.preventDefault();

lastY=y;

document.querySelector(‘body‘).addEventListener('touchend',function(event){

vary=event.originalEvent.changedTouches[0].clientY;

varst=document.body.scrollTop;//滾動(dòng)條高度

if(ybetterYst=10){

event.preventDefault();

}

弊端：第一次的touchmove存在漏洞問(wèn)題，touchmove的過(guò)程中也存在漏洞

3、監(jiān)聽(tīng)scroll的滾動(dòng)事件，禁止高度0；

每當(dāng)滾動(dòng)條的高度小于0時(shí)就重置為0，強(qiáng)制回退頂部位置

vartouch3=function(){

window.onscroll=function(){

vartop=document.documentElement.scrollTop||document.body.scrollTop;

if(top=0){

document.body.scrollTop=0;

}

弊端：會(huì)存在下拉URL閃屏的現(xiàn)象

總結(jié)：

可以考慮以上三種策略結(jié)合來(lái)使用會(huì)更好；也有些人把touchmove禁掉后自己模擬touchmov