完美解决手机浏览器顶部下拉出现网页源或刷新的问题
更新时间：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);
}
});
暂时没做到中断滑动并禁止默认滑动效果，欢迎大家指导！
以上这篇完美解决手机浏览器顶部下拉出现网页源或刷新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Layui实现多条件查询，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要给大家带来五个好看的基于 HTML+CSS+JS 的烟花特效，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下2022-01-01
圣诞节快到了,经常会在抖音上刷到圣诞树的视频,所以本文小编给大家介绍了如何使用JS实现圣诞树,文章通过代码示例给大家介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧2023-12-12
不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。接下来通过本文给大家分享 JavaScript 执行机制，感兴趣的朋友一起看看吧2018-10-10
本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤
在线查看PDF文件,已经是很常见的需求了,下面这篇文章主要给大家介绍了关于微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
javascript中的 object 和 function小结
JavaScript的面向对象是基于原形的，所有对象都有一条属于自己的原型链。Object与Function可能很多看Object instanceof Function ， Function instanceof Object都为true而迷惑，所以首先看下对象的实例。2016-08-08
这篇文章主要介绍了Websocket 向指定用户发消息的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
将字符串转化为xml对象需要注意的是该死的ie多版本的问题，具体实现如下，感兴趣的朋友不妨参考下本文，希望对大家有所帮助2013-09-09
这篇文章主要介绍了JavaScript实现简单网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论