ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS，把阻尼回弹限制在滚动区div内
下面是一个手机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内的更多相关文章
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- 【ionic】Mac IOS下真机调试
模拟调试不能保证真机一定没问题,所以真机调试是非常必要的一步 IOS设备 启用设备调试 在IOS设备中(Iphone,Ipad)中开始web检测器 设备->safari->高级->w ...
- new Date在ios下的兼容bug
今天发现在ios下new Date("2019-03-06").getTime()返回NaN 原因是ios下不支持“-”必须用"/" 记录备忘 var d = ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
- 网页在ios下点击无效的原因
之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现 ios下 如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:p ...
- ios下fixed回复框bug的解决方案
前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...
- ios下input获取焦点以及在软键盘的上面
<!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...
- ionic教程之Win10环境下ionic+angular实现滑动菜单及列表
写博客,不容易,你们的评论和转载,就是我的动力,但请注明出处,隔壁老王的开发园:http://www.cnblogs.com/titibili/p/5124940.html 2016年1月11日 21 ...
- iOS下JS与OC互相调用（一）--UIWebView 拦截URL
最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...
随机推荐
- CF960G Bandit Blues 分治+NTT（第一类斯特林数）
$ \color{#0066ff}{ 题目描述 }$ 给你三个正整数 \(n\),\(a\),\(b\),定义 \(A\) 为一个排列中是前缀最大值的数的个数,定义 \(B\) 为一个排列中是后缀最大 ...
- Eclipse右键增加在浏览器打开
https://github.com/samsonw/OpenExplorer/downloads 放在 \eclipse\plugins 下,右键项目就多一个 以后打开项目文件夹就方便了.
- python学习笔记1.3
温度转换实例 #TempConvert.pyTempStr = input("请输入带有符号的温度值: ")if TempStr[-1] in ['F', 'f']:C = (ev ...
- 查看已安装tensorflow版本以及安装路径
查看版本: import tensorflow as tf tf.__version__ 查看安装路径: tf.__path__
- 3. Javascript学习笔记——变量、内存、作用域
3. 变量.内存.作用域 3.1 基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值[Undefined.Null.Boolean.Number 和 Strin ...
- EPC sequence
nps-epc-term-2.7.0 eNodeB: /root/b2b/eutran/01/bin ./clean_log.sh ./set_ip.sh [root@CEN6- bin]# ./cl ...
- Weblogic反序列化远程命令执行漏洞(CNVD-C-2019-48814)测试
漏洞简介 2018年4月18日,Oracle官方发布了4月份的安全补丁更新CPU(Critical Patch Update),更新中修复了一个高危的 WebLogic 反序列化漏洞CVE-2018- ...
- J15W-J45W全铜质截止阀厂家，J15W-J45W全铜质截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W全铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜质截止阀)信息,其中包含了(J15W-J45W全铜质截止阀)厂 ...
- SpringCloud---消息驱动的微服务---Spring Cloud Stream
1.概述 1.1 Spring Cloud Stream:用来 为微服务应用 构建 消息驱动能力的框架: 可基于SpringBoot来创建独立.可用于生产的Spring应用程序: 使用Sp ...
- Python模拟鼠标和键盘操作实现重复性操作
前言 由于工作需要,要利用某软件去采集数据,做重复的动作大概500多次.所以想写一个程序代替人,去点击和输入. 一开始的思路有两个:1.用Python或者windows对此软件直接操作.2.利用Pyt ...