場景:

創新互聯于2013年開始,是專業互聯網技術服務公司,擁有項目網站建設、成都做網站網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元德惠做網站,已為上家服務,為德惠各地企業和個人服務,聯系電話:028-86922220
微信下拉時可以查看到URL,本身是微信的一種安全策略之一,也是一種用戶交互友好的體驗;
效果原理:
微信下拉彈性效果其實是瀏覽器本身的一種特性,重點就是scroll值的一種體現;
處理策略:
1、直接禁止mobile端的touchmove事件;
這種策略一般適用頁面只有一屏不需要下拉情況下使用;
var touch2 = function(){
document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) {
e.preventDefault();
});
}弊端:對于大小不同的屏要考慮到內容一屏全部顯示,不然2+屏的內容就沒有辦法看了;
2、禁止touchmove同時判斷scroll的位置是否到達頂部;
考慮到下拉時滾動條是否到達頂部 <= 10 來禁止touchmove事件,同時考慮存在先上拉再下拉的情況所以監聽的touchend事件并計算一次touch事件流中的最高點位置用以判斷
var touch3 = 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 touch4 = function () {
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
if(top <= 0){
document.body.scrollTop = 0;
}
}
}弊端:會存在下拉URL閃屏的現象
總結:
可以考慮以上三種策略結合來使用會更好;也有些人把touchmove禁掉后自己模擬touchmove處理,也是可以做到的就是比較復雜而已;
以上所述是小編給大家介紹的微信禁止下拉查看URL的處理方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復
本文標題:微信禁止下拉查看URL的處理方法
標題鏈接:http://www.yijiale78.com/article48/ghdohp.html
成都網站建設公司_創新互聯,為您提供營銷型網站建設、網站導航、動態網站、做網站、建站公司、靜態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯