JavaScript中防止微信浏览器被整体拖动的方法


Posted in Javascript onAugust 25, 2017

在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动。

结构如图: 

JavaScript中防止微信浏览器被整体拖动的方法

但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出“该网页由XXX提供”的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验。

查阅文献后,我准备在touchstart和touchmove上做些处理。

思路是当page页面滚动到顶部时,再向下拖动会阻止默认的拖动事件,page页面到底后也阻止向上拖动。结构与代码如下

doctype html

html
  head
    title 微信拖动测试
    meta(charset="utf-8")
    meta(name="viewport", content="initial-scale=1, maximum-scale=1, minimum-scale=1")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js")
  body
    #container
      .header
        | header
      .page
        .box box1 in page
        .box box2 in page
        .box box3 in page
        .box.bottom box4 in page
  script.
    $(function() {
      var startY, endY;
      var box_height = $('#container').height();
      $('.page').on('touchstart', function(event) {
        event.stopPropagation();
        startY = event.touches[0].pageY;
      });
      $('.page').on('touchmove', function(event) {
        event.stopPropagation();
        var endY = event.changedTouches[0].pageY;
        var changedY = endY - startY;
        var scroll_top = $('.page').scrollTop();



  // 判断是否在顶部,且向下拖动
        if (scroll_top === 0 && changedY > 0) {
          event.preventDefault();
        }




  // 判断是否在底部,且向上拖动
        var o = $('.bottom').offset();
        if (o.top + o.height === box_height && changedY < 0) {
          event.preventDefault();
        }
      });



 // header禁止拖动
      $('.header').on('touchmove', function(event) {
        event.preventDefault();
      });
    });

样式如下:

*{
  padding: 0;
  margin: 0;
}
#container{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #efefef;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
.header{
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  line-height: 80px;
  background-color: #ddd;
}
.page{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 80px;
  background-color: #ccc;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page > *{
  z-index: 1;
}
.box{
  width: 100%;
  height: 300px;
  line-height: 300px;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
}

总结

以上所述是小编给大家介绍的JavaScript中防止微信浏览器被整体拖动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
Vue.js进行查询操作的实例详解
Aug 25 #Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 #Javascript
You might like
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
python实现rest请求api示例
2014/04/22 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
django中模板的html自动转意方法
2018/05/27 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python如何控制进程或者线程的个数
2020/10/16 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
直接有效的自我评价
2014/01/11 职场文书
养殖项目策划书范文
2014/01/13 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
温馨提示标语
2014/06/26 职场文书
开展读书活动总结
2014/06/30 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
办公室规章制度范本
2015/08/04 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python