标签： 手机
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. Jenkins Pipeline+Maven+Gitlab持续集成构建问题集锦

    问题 1.全局配置一定要写正确,之前where git 给的地址时E:\Git\cmd\git.exe一直报错,其实Windows真正的git.exe在bin目录下 如果是Linux中,使用where ...

  2. DotNetBar 中 SuperGridControl 加载数据、获取数据、设置样式

    1.加载数据 构建列 //加载列 GridColumn gd = new GridColumn(); gd.Name = "第1"; gd.HeaderText = "第 ...

  3. Knockoutjs+select2 人员搜索

    HTML: <select class="form-control PersonEmail" id="txtProjectManager" data-bi ...

  4. .NET CORE 2.1 导出excel文件的两种方法

    最近在做 MVC 项目的时候遇到项目的导出,下面总结下两种导出到excel 的方法 第一种方法: 将文件写到本地,然后返回这个File 或者返回这个 File 的绝对地址  其中  _hostingE ...

  5. unable browse url when InfoPath Convert to Connection File

    You must actived the windows feature "Desktop Experience" on the server : http://blogs.tec ...

  6. Mysql 学习笔记09

    ---Mysql 的主从复制  replication 1 主从复制原理 至少有2台服务器,一台主服务器,一台从服务器,主服务器的所有改动,如 insert update delete 操作,都会同步 ...

  7. [转]什么是VUE？为什么用VUE？

    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的 ...

  8. ubuntu设置root登录ssh

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

  9. Centos系统优化

    系统优化脚本 #!/bin/bash #author junxi by #this script is only for CentOS 7.x #check the OS platform=`unam ...

  10. PTA 7-2 深入虎穴 （30 分)

    著名的王牌间谍 007 需要执行一次任务,获取敌方的机密情报.已知情报藏在一个地下迷宫里,迷宫只有一个入口,里面有很多条通路,每条路通向一扇门.每一扇门背后或者是一个房间,或者又有很多条路,同样是每条 ...