首页 > 代码库 > js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:
网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法:
$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); or document.addEventListener(‘touchmove‘, function(e){e.preventDefault()}, false);
查阅了资料然后进行了修改,于是得到以下解决方案,可以达到禁止微信黑底并且不影响上拉加载
// 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; } catch (e) { alert(‘touchSatrtFunc:‘ + e.message); } } document.addEventListener(‘touchstart‘, touchSatrtFunc, false); // 然后对允许滚动的条件进行判断,这里讲滚动的元素指向body var _ss = document.body; _ss.ontouchmove = function (ev) { var _point = ev.touches[0], _top = _ss.scrollTop; // 什么时候到底部 var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight; // 到达顶端 if (_top === 0) { // 阻止向下滑动 if (_point.clientY > startY) { ev.preventDefault(); } else { // 阻止冒泡 // 正常执行 ev.stopPropagation(); } } else if (_top === _bottomFaVal) { // 到达底部 如果想禁止页面滚动和上拉加载,讲这段注释放开,也就是在滚动到页面底部的制售阻止默认事件 // 阻止向上滑动 // if (_point.clientY < startY) { // ev.preventDefault(); // } else { // // 阻止冒泡 // // 正常执行 // ev.stopPropagation(); // } } else if (_top > 0 && _top < _bottomFaVal) { ev.stopPropagation(); } else { ev.preventDefault(); } };
js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。