完美解决手机浏览器顶部下拉出现网页源或刷新的问题
更新时间：2017年11月30日 09:34:21 作者：big猪
下面小编就为大家分享一篇完美解决手机浏览器顶部下拉出现网页源或刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题如下图所示：
一般处理此类问题都会有一个属性：”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);
}
});
暂时没做到中断滑动并禁止默认滑动效果，欢迎大家指导！
以上这篇完美解决手机浏览器顶部下拉出现网页源或刷新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
要知道localStorage本身并没有提供过期机制,既然如此那就只能我们自己来实现了,这篇文章主要给大家介绍了关于如何实现localStorage过期机制的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了JS简单获取及显示当前时间的方法,涉及javascript针对日期与时间的获取与运算相关操作技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript自定义数组排序方法,实例分析了javascript自定义数组排序的原理与实现技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js显示世界时间的方法,可现实世界各大城市的当前时间,涉及JavaScript针对时间的获取与运算操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了如何利用JS实现AI版自动玩贪吃蛇小游戏，文中的示例代码讲解详细，对我们学习JS游戏开发有一定帮助，需要的可以参考一下2022-06-06
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库,算是从分离出来的超集,这篇文章主要介绍了前端JS工具类lodash的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了uniapp微信小程序强制更新解决的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
JavaScript 利用StringBuffer类提升+=拼接字符串效率
JavaScript 利用StringBuffer类提升+=拼接字符串效率，需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了JS正则替换去空格的方法,结合实例形式对比分析了针对全角与半角空格的删除技巧,涉及replace正则替换的使用方法,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了给js文件传参数的方法,需要的朋友可以参考下2014-07-07
最新评论