WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供

移动端开发的小伙伴们应该遇到过一个问题：h5页面在微信端打开的时候，滑到最顶部再网上滑就会出现一段黑色的背景，并且显示当前页面url，虽然一般情况下不会有太大的影响，但是如果要自定义显示内容就会影响我们的需求了。找了很多方法，都是简单粗暴地直接e.preventDefault()，但这样会禁止内部Scroll，导致页面不能滚动，上拉加载失效，太残暴了，找了很久，终于找到了办法，可以达到禁止微信黑底并且不影响页面其他滑动，在此记录下：

// 首先禁止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();

}

};

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供相关推荐

vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
Web前端布局实战：三国杀页面布局（上）
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
web前端开发，如何提高页面性能优化？
web前端开发,如何提高页面性能优化? 内容方面减少HTTP请求次数减少DOM操作减少DNS查询使用Ajax 可缓存 css方面把css样式HTML代码页的上端从页面中分离css代码,从外 ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
safari 浏览器版本升级后提示“此网页出现问题，已重新载入网页” 解决办法
safari 浏览器版本升级后提示"此网页出现问题,已重新载入网页" 解决办法 safari回退条件版本回退的前提是关闭电脑的SIP机制,命令行 csrutil status 检 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
性能测试理论初探（七）性能测试工具介绍目前知道哪些性能工具？分别用在什么软件或平台的性能测试？服务端、web前端、移动端等性能测试工具有哪些？
文章目录一.前言二.常见性能测试工具 1.服务端性能测试工具 1.1 Jmeter 1.2 Locust 1.3 LoadRunner 1.4 LoadNinja 1.5 Jmeter + Pro ...

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供相关推荐

最新文章

热门文章

WEB前端 屏蔽移动端浏览器页面顶部提示 此网页由网站提供

WEB前端 屏蔽移动端浏览器页面顶部提示 此网页由网站提供相关推荐

最新文章

热门文章

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供

WEB前端屏蔽移动端浏览器页面顶部提示此网页由网站提供相关推荐