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


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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Prototype Selector对象学习
Jul 23 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
Python的词法分析与语法分析
2013/05/18 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
英语自荐信范文
2013/12/11 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
教育科研先进个人材料
2014/01/26 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
婚宴主持词
2015/06/30 职场文书
如何书写邀请函?
2019/06/24 职场文书