js禁止滑到最顶端时微信浏览器中显示当前网址
2017-12-07 13:48
330 查看
做移动端开发的小伙伴们应该遇到过一个问题: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(); } };
查看原文:http://lidada.org/wechart-stop/
相关文章推荐
- 用JS禁止微信浏览器下滑出现黑屏
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
- 如何获得当前屏幕顶端距离整个页面最上端的距离(即js获取浏览器滚动条距离顶端的距离)
- 微信开发js限制页面只能在微信浏览器打开 禁止外置浏览器
- 兼容所有浏览器的JS动态显示当前日期时间
- 微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
- JS实时显示当前时间(IE+firefox)浏览器兼容代码(图证)
- js判断当前环境是否是微信内浏览器
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- 微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
- JS实时显示当前时间(IE+firefox)浏览器兼容代码(图证)
- 微信开发js限制页面只能在微信浏览器打开 禁止外置浏览器
- 微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
- js实现微信禁止h5网页下拉,禁止微信内置浏览器下拉网页,附:demo
- 微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
- 微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口
- js 去掉alert在手机浏览器显示网址的网址信息
- Js将当前日期显示在浏览器的状态栏【搜藏】
- 微信浏览器禁止页面下拉查看网址