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


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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
JsRender for object语法简介
Oct 31 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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 中使用随机数的三个步骤
2006/10/09 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP模板解析类实例
2015/07/09 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
Python入门篇之字符串
2014/10/17 Python
Python 调用Java实例详解
2017/06/02 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
使用tensorflow实现线性回归
2018/09/08 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
初中学生期末评语
2014/04/24 职场文书
公司2015年终工作总结
2015/05/26 职场文书
培训简讯范文
2015/07/20 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
聘用合同范本
2015/09/21 职场文书
导游词之扬州大明寺
2019/10/09 职场文书