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


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 web对话框与弹出窗口
Feb 22 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
axios基本入门用法教程
Mar 25 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
Redis构建分布式锁
2017/03/28 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
重大事项社会稳定风险评估方案
2014/06/15 职场文书
法制教育演讲稿
2014/09/10 职场文书
学校开除通知书
2015/04/25 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python