博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决手机浏览器顶部下拉出现网页源或刷新的问题
阅读量:7020 次
发布时间:2019-06-28

本文共 1260 字,大约阅读时间需要 4 分钟。

问题如下图所示:

  一般处理此类问题都会有一个属性:”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); }});

 

转载于:https://www.cnblogs.com/qhorse/p/7955011.html

你可能感兴趣的文章
Intellij IDEA 插件库无法链接使用的解决方案
查看>>
整合Struts2+Hibernate的体会
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
BluePrism初尝
查看>>
我的友情链接
查看>>
java写的网站www.liutime.com求鉴定
查看>>
php截取中文字符串
查看>>
20160323作业
查看>>
Linux基础命令---traceroute追踪路由
查看>>
JSON在MAP,LIST传值中的应用
查看>>
我要自己的东西
查看>>
20120518,ISISover
查看>>
Vim基本命令
查看>>
Java学习笔记二十三:Java的继承初始化顺序
查看>>
今天正式入职了
查看>>
CentOS 6.4安装配置ldap+svn
查看>>
linux网页显示乱码终极解决---达到英文全部显示为中文
查看>>
10个编程提示,让你在实践中更高效、更具创造性
查看>>
rsyslog+loganalyze+mysql 日志集中处理
查看>>