下面是一个手机APP页面，分成上中下三部分，最上面和最下面是固定的，中间可以滚动。这是常见的APP布局方式。
<style>

.box{

  overflow: auto;

  -webkit-overflow-scrolling: touch;  /*使得div内的超出滑动具有惯性，阻尼回弹等特性,否则滑动很生涩*/

}

</style>

</head>

<body class="box" >

     <div id="top" class="scroll1" style="height:50px;"></div>

 <div class="scroll" style="height:calc( 100% - 100px);width:100%;overflow:auto;">

     <div style="height:500px;width:100%;">

     </div>

      <div style="height:500px;margin-top:200px; ">

     </div>

     <div style="height:500px;margin-top:200px; ">

     </div>

      <div style="height:500px;margin-top:200px; ">

     </div>

 </div>

  <div id="bottom" class="scroll1" style="height:50px;"></div>
运行效果如下，顶部和底部固定区域都是黄色，中间的滚动div包含了红灰相间的色块。


在ios测试时发现基本正常，可是有以下几个问题：

1.当滚动到底部（稍停几秒），再上拉的时候，整个网页就会上滑，松手后阻尼回弹。

2.当滚动到顶部（稍微停几秒），再下拉时，整个网页就下滑，松手后阻尼回弹。

3.上在顶部或底部上下滑动时，整个页面会上下滑动。松手后立即滑动中间区域，也是上下滑动（停留秒后再滑，则正常滑动中间区域）

问题1,2其实是一个问题，解决原理如下：

当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点。这一招欺骗手法瞒天过海把IOS骗过去了。代码如下：

    var overscroll = function(el) {

    el.addEventListener('touchstart', function() {

        var top = el.scrollTop

        ,totalScroll = el.scrollHeight

        ,currentScroll = top + el.offsetHeight;

        if(top === 0) {

            el.scrollTop = 1;

        }else if(currentScroll === totalScroll) {

            el.scrollTop = top - 1;

        }

    });

}

 overscroll(document.querySelector('.scroll'));

问题3，更简单，直接忽略滚动事件即可：

document.all.bottom.addEventListener('touchmove', function(evt) {

evt.preventDefault();

});

document.all.top.addEventListener('touchmove', function(evt) {

evt.preventDefault();

});

ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS，把阻尼回弹限制在滚动区div内的更多相关文章

  1. 微信小程序在ios下Echarts图表不能滑动的解决方案

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...

  2. 【ionic】Mac IOS下真机调试

    模拟调试不能保证真机一定没问题,所以真机调试是非常必要的一步 IOS设备 启用设备调试 在IOS设备中(Iphone,Ipad)中开始web检测器 设备->safari->高级->w ...

  3. new Date在ios下的兼容bug

    今天发现在ios下new Date("2019-03-06").getTime()返回NaN 原因是ios下不支持“-”必须用"/" 记录备忘 var d = ...

  4. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  5. 网页在ios下点击无效的原因

    之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现  ios下  如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:p ...

  6. ios下fixed回复框bug的解决方案

    前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

  7. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  8. ionic教程之Win10环境下ionic+angular实现滑动菜单及列表

    写博客,不容易,你们的评论和转载,就是我的动力,但请注明出处,隔壁老王的开发园:http://www.cnblogs.com/titibili/p/5124940.html 2016年1月11日 21 ...

  9. iOS下JS与OC互相调用（一）--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

随机推荐

  1. Python+selenium 模拟wap端页面操作

    from selenium.webdriver.chrome.options import OptionsmobileEmulation = {'deviceName': 'iPhone X'}opt ...

  2. CF960G Bandit Blues 分治+NTT（第一类斯特林数）

    $ \color{#0066ff}{ 题目描述 }$ 给你三个正整数 \(n\),\(a\),\(b\),定义 \(A\) 为一个排列中是前缀最大值的数的个数,定义 \(B\) 为一个排列中是后缀最大 ...

  3. MVC软件设计模式

    Model(模型):负责数据维护 View(视图):负责向用户呈现数据 Control(控制):负责模型和视图之间的交互 应用:Struts就是基于MVC模式的架构

  4. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  5. Bootrap 项目实战（微金所前端首页）第三部分（CSS,js源码）

    CSS源码 common.css /** *Created by xxc on 2019/2/26 */ body, html, div, img, a, p, ul, ol, dl, dd, dt, ...

  6. Python——单例设计模式

    单例设计模式: 让类创建的对象,在系统中只有唯一的实例, 使用python类内置的__new__()方法实现,__new__()方法在创建对象时会被自动调用,通过重写__new__()方法,使得无论用 ...

  7. 分分钟钟学会Python - 数据类型（list、tuple）

    第四节 数据类型(列表.元祖) 今日内容 列表 元祖 1.列表 1.格式 users = ["ji",1,3,"gyhj"] 2.公共方法 1.len #计算长 ...

  8. axios简单介绍

    axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...

  9. js面向对象（二）——继承

    上一篇随笔讲了封装,这一篇我们说说继承,还是那上一篇猫和狗说事儿 function Dog(name,s){ this.name=name; this.sex=s; } Dog.prototype.t ...

  10. Part 1: Setting up ARM GNU tool chain

    ARM Build Tools GNU Tools for ARM Embedded Processors. GNU Make for Windows. GNU Tools for ARM Embed ...