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


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中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 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 CLI实现简单的数据库实时监控调度
2009/07/01 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
一分钟理解js闭包
2016/05/04 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python实现文本文件合并
2015/12/29 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
numpy 声明空数组详解
2019/12/05 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
内刊编辑求职自荐书范文
2014/02/19 职场文书
2015年推普周活动总结
2015/03/27 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
《藏戏》教学反思
2016/02/23 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers