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


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语句可以不以;结尾的烦恼
Mar 08 Javascript
大家未必知道的Js技巧收藏
Apr 07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
基于php缓存的详解
2013/05/15 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php动态绑定变量的用法
2015/06/16 PHP
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python采集百度百科的方法
2015/06/05 Python
python实现简单购物商城
2016/05/21 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
财政局长自荐信范文
2013/12/22 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
go xorm框架的使用
2021/05/22 Golang
pytorch 实现变分自动编码器的操作
2021/05/24 Python