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


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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
微信小程序实现录音Record功能
May 09 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 函数中使用static的说明
2012/06/01 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
医药工作者的求职信范文
2013/09/21 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
大一自我鉴定范文
2013/12/27 职场文书
大学生村官事迹材料
2014/01/21 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
初中新生军训方案
2014/05/13 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
安全员岗位职责
2015/02/10 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
行政二审代理词
2015/05/25 职场文书
实习证明格式范文
2015/06/16 职场文书
小学感恩主题班会
2015/08/12 职场文书