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


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多线程的实现方法
May 08 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
javascript iframe跨域详解
Oct 26 Javascript
jQuery中的select操作详解
Nov 29 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 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
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python+mysql实现教务管理系统
2019/02/20 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
总经理助理的八要求
2013/11/12 职场文书
幼儿教师考核制度
2014/01/25 职场文书
个人求职信范文
2014/05/24 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
创业计划书之烤红薯
2019/09/26 职场文书