标签： 手机
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. New Year, New Devs: Sharpen your C# Skills

    At the beginning of each new year, many people take on a challenge to learn something new or commit ...

  2. ubuntu 中安装 Redis

    1.下载安装root@21ebdf03a086:/# apt-cache search redisroot@21ebdf03a086:/# apt-get install redis-server a ...

  3. C# WPF 开发随想

    最近项目遇到切换窗口的时候偶尔出现闪屏的问题,前前后后花了两天的时间还是没有找到问题所在,一部分一部分的注释代码,看逻辑,开布局,还是一无所获. 最后还是他人的提醒下,直接不切换窗口,在同一个窗口中布 ...

  4. 日志收集系统elk

    目录 elk简介 官方帮助 rsyslog rsyslog日志采集介绍与使用 综合实验 案例一: 单机ELK部署 案例二. JAVA环境配置,部署 filebeat+Elasticsearch apa ...

  5. 【题解】 UVa11729 Commando War

    题目大意 你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bj分钟交代任务,然后他就会立刻独立地.无间断地执行Ji分钟后完成任务.你需要选择交代任务的顺序,使得所有任务尽早执行完毕(即最后一 ...

  6. IO模型《四》多路复用IO

    多路复用IO(IO multiplexing) IO multiplexing这个词可能有点陌生,但是如果我说select/epoll,大概就都能明白了.有些地方也称这种IO方式为事件驱动IO (ev ...

  7. 936. Stamping The Sequence

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

  8. 吴裕雄 python 机器学习——高斯贝叶斯分类器GaussianNB

    import matplotlib.pyplot as plt from sklearn import datasets,naive_bayes from sklearn.model_selectio ...

  9. JQuery实现全选、反选和取消功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. android开发如何获取res/raw和assets文件夹的路径

    ---恢复内容开始--- android开发如何获取res/raw和assets文件夹的路径,主要分为两种情况: 1.如果你只是拷贝动作,那么你只需要得到res/raw和assets文件输入流就可以, ...