标签： 手机
2016-02-02 18:09 696人阅读 评论(0) 收藏 举报
 

在ios下，双击屏幕某些地方，滚动条会自动向上走一段。

当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。

用js解决一下吧，这俩问题很类似，总结到一起了。

----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。

html部分：----------------------------

<body>

<div class="wrapper">

<section>内容部分aaaa111</section>

<section>内容部分aaaa222</section>

<section>内容部分aaaa333</section>

</div>

</body>

css部分：--------------------------

.wrapper2{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
  overflow-y:auto;
  -webkit-overflow-scrolling : touch; 
}

js部分：----------------------------

/*阻止ios拖拽到底部还能继续拖拽*/

var ScrollFix = function(elem) {
    // Variables to track inputs
    var startY, startTopScroll;
    
    elem = elem || document.querySelector(elem);
    
    // If there is no element, then do nothing    
    if(!elem)
        return;

// Handle the start of interactions
    elem.addEventListener('touchstart', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;
        
        if(startTopScroll <= 0)
            elem.scrollTop = 1;

if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
    }, false);
};

/*判断设备调用ScrollFix*/

var sUserAgent=navigator.userAgent.toLowerCase();
if(sUserAgent.match(/iphone os/i) == "iphone os"){
    $('.wrapper').addClass('wrapper2');
    ScrollFix($('.wrapper2')[0]); 
}

/*阻止用户双击使屏幕上滑*/
var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
var iLastTouch = null;                                //缓存上一次tap的时间
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
{
    document.body.addEventListener('touchend', function(event)
    {
        var iNow = new Date()
            .getTime();
        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
        var delta = iNow - iLastTouch;
        if (delta < 500 && delta > 0)
        {
            event.preventDefault();
            return false;
        }
        iLastTouch = iNow;
    }, false);
}

h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽（露出黑色背景）的更多相关文章

  1. 原生H5页面模拟APP左侧滑动删除效果

    话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...

  2. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  3. H5页面IOS中键盘弹出导致点击错位的问题

    IOS在点击输入框弹出键盘  键盘回缩 后 定位没有相应改变  还有  textarea 也会弹出键盘 $("input").blur(function() { console.l ...

  4. H5页面关于android软键盘弹出顶起底部元素的解决方案

    应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...

  5. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  6. 客户端相关知识学习（四）之H5页面如何嵌套到APP中

    Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...

  7. Android使用WebView加载H5页面播放视频音频，退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  8. IOS的H5页面滑动不流畅的问题：

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  9. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

随机推荐

  1. scvmm2008 错误 2912 0x80041001

    执行scvmm系列作业时抛出错误 2912 0x80041001. 这个原因是由于主机和vmm通信媒介bits服务挂起所引起的,bits全称Background Intelligent Transfe ...

  2. Elasticsearch（1.1.1）基础教程pdf

    基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 接近实时(NRT)        Elasticsearch是一个接近实时的搜索平台.这意味着, ...

  3. C# redis 的简单应用

    region 准备参数 var connStr = "localhost:6379,password="; var db = 2; SiteRedisHelper redisHel ...

  4. day13学python 协程+事件驱动

    协程+事件驱动 协程 (微线程)--用处多,重点 当调度切换时 靠寄存器上下文和栈保存 要使用时再调用(即可不会因io传输数据卡壳 从而耗时无法继续进行)实现并行 优缺点: 优点: 1 无需同线程上下 ...

  5. 936. Stamping The Sequence

    You want to form a target string of lowercase letters. At the beginning, your sequence is target.len ...

  6. KVM虚拟机的日常管理与配置

    1. 查看KVM虚拟机配置文件及运行状态(1) KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/ autostart目录是配置kvm虚拟机开机自启动目录. (2) virsh命令帮 ...

  7. ubuntu设置root登录ssh

    1. 默认不带ssh,所以需要安装一下ssh sudo apt install openssh-server 2 .设置root密码,ubuntu默认root密码是随机的,需要重置一下 sudo pa ...

  8. codeforces785E

    http://codeforces.com/contest/785/problem/E 一道经典的求逆序对的题目,可以用树状数组套平衡树解决 平衡树需要支持插入一个数,删除一个数,找比 x 小的数的个 ...

  9. 高德地图API获取天气

    1.建立行政区规划清单表 use edw; drop table if exists dim_prov_city_adcode; create table if not exists dim_prov ...

  10. error C2955: “std::xx”: 使用 类 模板 需要 模板 参数列表

    一般出现这个错误 最可能是一种情况 queue q;//这样写 这样写肯定错 [笑哭] queue<int> q; //正确的 我想静静了