完美解决手机浏览器顶部下拉出现网页源或刷新的问题


Posted in Javascript onNovember 30, 2017

问题如下图所示:

完美解决手机浏览器顶部下拉出现网页源或刷新的问题

一般处理此类问题都会有一个属性:”event.preventDefault()”,但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方式也与其类似。

因为滑动区域是向走的,所以滑动块的顶部到浏览器顶部的距离最大为0(其余为负值[$('#bodycthead').offset().top]),当为0的时候说明已经回到了顶部,继续向下拉动的时候就不应该有反应,可以禁止默认滑动,而向上拉动的时候应该取消默认的滑动,所以应该将”event.preventDefault()”封装成一个函数。

需要做的就是判断是向上滑动还是向下滑动,当接触屏幕的时候记录一个Y值(scroll_start = e.changedTouches[0].clientY;),移动的时候会产生一个Y值(e.changedTouches[0].clientY),两个值得差值(e.changedTouches[0].clientY-scroll_start)如果是正值说明是向下滑动,如果是负值则是向上滑动。

添加事件监听:

var scroll_start=0;//定义滑动时的起点
function handler(){//禁止默认滑动函数
 event.preventDefault();
}
document.addEventListener("touchstart",function(e){
 scroll_start = e.changedTouches[0].clientY;//设置起点为触摸时的点
 if($('#bodycthead').offset().top==0){//如果触摸时是滑动块在顶部则禁用默认滑动
  document.addEventListener('touchmove', handler, false);
 }
});
document.addEventListener("touchmove",function(e){
 $("title").html(e.changedTouches[0].clientY-scroll_start);
 if($('#bodycthead').offset().top==0){//想做的是中断滑动并禁用默认滑动,暂时没找到中断的方法
  document.addEventListener('touchmove', handler, false);
 }
 if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑动则恢复默认滑动
  document.removeEventListener('touchmove', handler, false);
 }
});

暂时没做到中断滑动并禁止默认滑动效果,欢迎大家指导!

以上这篇完美解决手机浏览器顶部下拉出现网页源或刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解JavaScript函数绑定
Aug 18 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
详解react-redux插件入门
Apr 19 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
微信小程序实现左滑删除效果
Nov 18 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 #Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 #Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
写给小白看的JavaScript异步
Nov 29 #Javascript
3种vue组件的书写形式
Nov 29 #Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 #Javascript
You might like
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
动态加载js的几种方法
2006/10/23 Javascript
使javascript也能包含文件
2006/10/26 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
python求crc32值的方法
2014/10/05 Python
Python之PyUnit单元测试实例
2014/10/11 Python
python3 shelve模块的详解
2017/07/08 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
数控专业个人求职信范例
2013/11/29 职场文书
土地转让协议书
2014/04/15 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
英文慰问信
2015/02/14 职场文书
离职告别感言
2015/08/04 职场文书
初三语文教学反思
2016/03/03 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
创业计划书之书店
2019/09/10 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
详解java如何集成swagger组件
2021/06/21 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python