微信浏览器禁止页面下拉查看网址实例详解


Posted in Javascript onJune 28, 2017

微信浏览器禁止页面下拉查看网址实例详解

此类事件是手机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.3water.com/201706/yuanma/preventoverscrollmaster(3water.com).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue-router源码之history类的浅析
May 21 Javascript
vue中nextTick用法实例
Sep 11 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 #Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 #Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 #Javascript
vue2项目使用sass的示例代码
Jun 28 #Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 #Javascript
详解webpack+angular2开发环境搭建
Jun 28 #Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python binascii 进制转换实例
2019/06/12 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python django生成迁移文件的实例
2019/08/31 Python
python如何进行矩阵运算
2020/06/05 Python
python xlsxwriter模块的使用
2020/12/24 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
实习教师自我鉴定
2013/12/12 职场文书
打架检讨书300字
2014/02/02 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS