标签： 手机
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. dataset数据导出到Excel

    1.将数据写入HTTP输出流/这样子导出以后的数据全在一行中 public void CreateExcel(DataSet ds, string FileName) { HttpResponse r ...

  2. 数独高阶技巧之八——SDC

    在本系列的第四篇“简单异数链”中,向大家介绍了XY-Wing等一系列Wing类技巧,并提到可以用(拐弯的)数组的观念来理解这些结构,经过第六篇ALS的学习之后,大家回过头再去看Wing,应该可以发现相 ...

  3. c#用表达式树实现深拷贝功能

    因为对表达式树有点兴趣,出于练手的目的,试着写了一个深拷贝的工具库.支持.net standard2.0或.net framework4.5及以上. GitHub地址https://github.co ...

  4. VS2013启动越来越慢

    Q.VS2013 原来启动只要大概 一两秒的时间,现在启动最少也得十秒以上.而且打开项目也变得很慢了!求解决方案. A.清理一下缓存就好了. VS2010清理缓存:第一:启用vs2010命令行工具:在 ...

  5. Javascript:splice() 方法浅析

    定义和用法: splice()方法用于插入.删除或替换数组的元素. 注:该方法会改变原始数组,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改 ...

  6. Ubuntu16.04实用python脚本 - JDK的配置！

    前提已经把Oracle JDK解压缩到指定目录了,我的JDK目录是:“/usr/jdk1.8.0_121” 全部脚本: # coding=utf-8 ,中文注释需要加入编码格式 #这是我的测试文件,在 ...

  7. Maximum splitting（规律，数论）

    You are given several queries. In the i-th query you are given a single positive integer ni. You are ...

  8. [译文]casperjs 的API-casper模块

    Casper class: 可以通过这个模块的create()方法来获取这个模块的一个实例,这是最容易的: var casper = require('casper').create(); 我们也可以 ...

  9. nginx高性能WEB服务器系列之三版本升级

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  10. 2D激光SLAM算法比较+cartographer

    Hector slam: Hector slam利用高斯牛顿方法解决scan-matching问题,对传感器要求较高. 缺点:需要雷达(LRS)的更新频率较高,测量噪声小.所以在制图过程中,需要rob ...