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

问题如下图所示：

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

暂时没做到中断滑动并禁止默认滑动效果，欢迎大家指导！

以上这篇完美解决手机浏览器顶部下拉出现网页源或刷新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信浏览器禁止页面下拉查看网址实例详解

    微信浏览器禁止页面下拉查看网址实例详解 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); 但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这

  • 通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    大家通过手机自带浏览器打开百度.淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App.实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片. 如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏

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

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

    问题如下图所示: 一般处理此类问题都会有一个属性:"event.preventDefault()",但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方式也与其类似. 因为滑动区域是向走的,所以滑动块的顶部到浏览器顶部的距离最大为0(其余为负值[$('#bodycthead').offset().top]),当为0的时候说明已经回到了顶部,继续向下拉动的时候就不应该有反应,可以禁止默认滑动,而向上拉动的时候应该取消默认的滑动,所以应该将"event.preve

  • 完美解决iview 的select下拉框选项错位的问题

    在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) 图1: 图2: 在分析组件代码后,发现以下一个样式: .ivu-modal .ivu-select-dropdown { position: absolute !important; } 解决方案 正是这个样式影响了下拉框的定位,解决的方式是覆盖作者的原来样式. 但是,很不巧的是,作者加了一个 !i

  • JS实现从顶部下拉显示的带动画QQ客服特效代码

    JS实现从顶部下拉显示的带动画QQ客服特效代码

    本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

  • 完美解决手机网页中输入框被输入法遮挡的问题

    之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 css部分 (dlg-top与dlg-bottom为对话框的类,用于确定对话框的定位方式) .dlg-top{ position: fixed; top:100px; left:10%; } .dlg-bottom{ position: fixed; bottom:0px; left:10%; }

  • 完美解决IE9浏览器出现的对象未定义问题

    目前Window7的机器上,使用IE9浏览器的用户很多,但是IE9在兼容性上做了较严格的控制,导致很多程序在chrome,firefox,ie6,ie7,ie8上可以正常运行,在ie9上确出现了各种问题,这里要说的其中一个问题,就是对象为定义,特别是单一个页面上嵌套了多层iframe/frame的时候,往往会出现: Array对象未定义 $对象未定义 jQuery对象未定义 Json对象未定义 undefined对象未定义 *对象未定义... 这种情况,我们一开始, 1,首先当然先检查是否JS文

  • 解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是 选择的时候 如果 请选择 的value 是"" 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 <script type="text/javaS

  • 完美解决axios在ie下的兼容性问题

    首先说下axios虽说是支持ie8+,不过其原理是基于promise之上实现的 所以会有不兼容ie的问题 也就是trident内核的全不行, 会报:vuex requires a Promise polyfill in this browser 解决方法: 1.安装 babel-polyfill 2.修改build配置环境为下图或者 直接import 完事.重启下项目就搞定了. 数据获取正常了~ 以上这篇完美解决axios在ie下的兼容性问题就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • Android实现微信右侧顶部下拉对话框

    Android实现微信右侧顶部下拉对话框

    我们使用微信都知道,其右侧顶部有一个下拉对话框,我们可以执行添加好友,扫一扫等功能,今天我们就来模仿实现一下这个功能(实现的方式有很多种,我今天只说一种借助透明主题Activity的方式实现:如果有兴趣还可以移步至仿淘宝底部导航栏):本篇的实现的效果如下: 下面就来说一说实现的思路(重要): 第一步:创建弹出对话框布局 <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:andr

  • Android ScrollView的顶部下拉和底部上拉回弹效果

    Android ScrollView的顶部下拉和底部上拉回弹效果

    要实现ScrollView的回弹效果,需要对其进行触摸事件处理.先来看一下简单的效果: 根据Android的View事件分发处理机制,下面对dispatchTouchEvent进行详细分析: 在加载布局完成之后,获取ScrollView的第一个子元素,保存它的参数,left top right bottom参数,根据顶部下拉操作和底部上拉操作进行子View的布局参数根据滑动距离改变,ACTION_UP的时候判断是否存在回弹,如果需要则进行动画回弹到原来的位置,可以添加一个回弹结束监听,比如监听回

  • 解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

随机推荐