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

问题如下图所示:

  一般处理此类问题都会有一个属性:”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);
    }
});      
时间: 2024-07-28 13:22:01

解决手机浏览器顶部下拉出现网页源或刷新的问题的相关文章

手机禁止浏览器往下拉

//阻止浏览器往下拉 var btnElem=document.getElementById("wrap");//获取ID var posStart = 0;//初始化起点坐标 var posEnd = 0;//初始化终点坐标 function initEvent() { btnElem.addEventListener("touchstart", function(event) { event.preventDefault();//阻止浏览器默认行为 posSta

Android 自定义ListView实现底部分页刷新与顶部下拉刷新

在项目开发中,由于数据过大时,需要进行分页加载或下拉刷新,来缓解一次性加载的过长等待.本篇博文实例讲解通过自定义的ListView实现底部分页加载和顶部下拉刷新的效果. 其效果图: 一.ListView 底部分页加载 整个底部分页加载,主要分一下几步: 1.加载底部自定义View; 2.响应OnScrollListener监听事件,onScroll方法记录最后可见的View Item以及整个totalItemCount.当onScrollStateChanged状态改变时, 当滑动到底端,并滑动

Android 自定义ListView实现底部分页刷新与顶部下拉刷新,androidlistview

在项目开发中,由于数据过大时,需要进行分页加载或下拉刷新,来缓解一次性加载的过长等待.本篇博文实例讲解通过自定义的ListView实现底部分页加载和顶部下拉刷新的效果. 其效果图: 一.ListView 底部分页加载 整个底部分页加载,主要分一下几步: 1.加载底部自定义View; 2.响应OnScrollListener监听事件,onScroll方法记录最后可见的View Item以及整个totalItemCount.当onScrollStateChanged状态改变时, 当滑动到底端,并滑动

把cookie以json形式返回,用js来set cookie.(解决手机浏览器未知情况下获取不到cookie)

1.继上一篇随笔,链接点我,解决手机端cookie的问题. 2.上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的url后面. 3.但是今天发现了新的问题,js取cookie存的sessionId为空,情况如下: (1)QQ浏览器能获取某些cookie,另一些cookie获取为空,猜测是后台Response SetCookie的时候,手机端浏览器没能良好的接受. (2)UC浏览器测试正常. (3)Safari情

解决手机浏览器和微信中select中border:none;无用和去掉小三角

设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: 1 appearance:none; 2 -moz-appearance:none; /* Firefox */ 3 -webkit-appearance:none; /* Safari 和 Chrome */ appearance使用方法: 1 .elmClass{ 2 -webkit-appearance: value; 3 -moz-appearance: value; 4 ap

解决element生成的下拉菜单,不在父级之下,而是在body之下,通过父级控制该下拉菜单的样式,达到不跟别的地方冲突的目的

项目中存在多个下拉菜单,每个下拉菜单的样式可能不同 不能直接拿到element里面的类名来修改,这样会导致全局统一 在下拉菜单上定义一个父级类名,通过这个父级类名来定义这些下拉菜单的样式,达到私有化 遇到问题,生成的下拉菜单跟父类不在同一个节点,无法通过父级类来指定样式 解决方案:在下拉菜单的结构上添加 ref,页面加载后动态添加父级类名 原文地址:https://www.cnblogs.com/wuhefeng/p/12530803.html

isscroll插件 实现下拉加载 上啦刷新 转

http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-widt

解决手机浏览器上input 输入框导致页面放大的问题(记录)

在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

jQuery页面顶部下拉广告

本广告可以是图片也可以是Flash,可以设置自动播放的时间,可以手动停止和重播. 效果展示 http://hovertree.com/texiao/jquery/80/ 源码下载:http://hovertree.com/h/bjaf/8jy44vm8.htm 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D