微信浏览器禁止页面下拉查看网址实例详解
2017-06-28 15:39
681 查看
微信浏览器禁止页面下拉查看网址实例详解
此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:
$(‘body').on(‘touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这个问题:
var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentScroll = top + el.offsetHeight; //If we're at the top or the bottom of the containers //scroll, push up or down one pixel. // //this prevents the scroll from "passing through" to //the body. if(top === 0) { el.scrollTop = 1; } else if(currentScroll === totalScroll) { el.scrollTop = top - 1; } }); el.addEventListener('touchmove', function(evt) { //if the content is actually scrollable, i.e. the content is long enough //that scrolling can occur if(el.offsetHeight < el.scrollHeight) evt._isScroller = true; }); } overscroll(document.querySelector('.scroll')); document.body.addEventListener('touchmove', function(evt) { //In this case, the default behavior is scrolling the body, which //would result in an overflow. Since we don't want that, we preventDefault. if(!evt._isScroller) { evt.preventDefault(); } });
详情见:https://github.com/luster-io/prevent-overscroll/blob/master/index.html
源码下载:http://xiazai.jb51.net/201706/yuanma/preventoverscrollmaster(jb51.net).rar
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
- JavaScript禁止微信浏览器下拉回弹效果
- PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
- 解决微信内置浏览器返回上一页强制刷新问题方法
- JavaScript 监控微信浏览器且自带返回按钮时间
- 微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)
- JS如何设置iOS中微信浏览器的title
- Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
- 微信小程序 在Chrome浏览器上运行以及WebStorm的使用
- JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 解决微信浏览器Javascript无法使用window.location.reload()刷新页面
相关文章推荐
- 微信浏览器禁止页面下拉查看网址
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- 微信浏览器禁止页面下拉查看网址
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
- Linux磁盘管理之df命令详解和使用实例(查看磁盘空间占用情况)
- linux free命令详解和使用实例(查看内存使用率)
- Linux 查看系统硬件信息(实例详解)
- ThinkPHP redirect 页面重定向使用详解与实例
- 可以禁止查看页面源文件?
- Linux 查看系统硬件信息(实例详解)
- Linux 查看系统硬件信息(实例详解)
- Symfony页面的基本创建实例详解
- Linux 查看系统硬件信息(实例详解)
- Linux 查看系统硬件信息(实例详解)
- Linux 查看系统硬件信息(实例详解)
- Linux 查看系统硬件信息(实例详解)
- Linux 查看系统硬件信息(实例详解)