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


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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
URL Rewrite的设置方法
2007/01/02 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
邮政员工辞职信
2014/01/16 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
矿泉水广告词
2014/03/20 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang