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


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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
js DOM模型操作
Dec 28 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
用几道面试题来看JavaScript执行机制
Apr 30 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
angular2使用简单介绍
2016/03/01 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python 制作网站小说下载器
2021/02/20 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
证婚人经典证婚词
2014/01/09 职场文书
会计学自我鉴定
2014/02/06 职场文书
学习演讲稿范文
2014/05/10 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
辞职信标准格式
2015/02/27 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
趣味运动会广播稿
2015/08/19 职场文书