JavaScript中防止微信浏览器被整体拖动的方法
时间:2019-03-31
本文章向大家介绍JavaScript中防止微信浏览器被整体拖动的方法,主要包括JavaScript中防止微信浏览器被整体拖动的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动。
结构如图:
但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动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中防止微信浏览器被整体拖动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 小爬虫之爬取豆瓣电影排行榜1.技术路线2.任务3.分析4.运行结果5.源码
- Numpy 修炼之道 (5)—— 索引和切片
- 深入理解final关键字
- Numpy 修炼之道 (4)—— 基本运算操作
- 一些APT攻击案例分享
- 浅谈命令查询职责分离(CQRS)模式
- Numpy 修炼之道 (3)—— 数据类型
- 熔断器设计模式
- 树链剖分详解
- 洛谷P3379 【模板】最近公共祖先(LCA)(树链剖分)
- 学习使用Jieba1.Jieba2. 特点3.功能4.安装5.使用6.其他中文分词工具
- 如何使用sklearn加载和下载机器学习数据集
- 洛谷P3224 [HNOI2012]永无乡
- 手把手教你使用sklearn快速入门机器学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【前端】:模块化 - 打包技术
- 代码详解——《无人驾驶车辆模型预测控制》3.3.3参考路径更改
- MySQL redo与undo日志解析
- 样本不平衡造成的影响和解决方案
- 代码详解——NMPC路径跟踪复杂参考路径设置
- 代码详解——NMPC之加入控制平顺性惩罚项
- 代码详解——采用控制增量作为控制输入的NMPC路径跟踪
- 程序员进阶系列:年少不懂爱家家,懂了已是猿中人。
- 代码详解——Simulink中的运动学模型
- Spring Boot 特性之 Failure Analysis
- 「周末福报」头铁的我,一头扎进了知识盲区 ThreadLocal
- 「周末福报」如何高效使用 Kryo
- 「刷题警告」递归算法
- 轻松学Pytorch – 构建生成对抗网络
- 「周末福报」你了解 SPI 吗?