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 ...
随机推荐
- python 简单爬虫（beatifulsoup)
---恢复内容开始--- python爬虫学习从0开始 第一次学习了python语法,迫不及待的来开始python的项目.首先接触了爬虫,是一个简单爬虫.个人感觉python非常简洁,相比起java或 ...
- centos 7 设置开机启动服务
2018-12-25 Centos7下添加开机自启动脚本和服务的方法 以docker 服务为例 1.centos7自带命令设置 systemctl enable docker.service 2.设置 ...
- C#串口通讯中常用的16进制的字节转换
1.对于通讯协议的十六进制数值进行简单转换 //二进制转十进制Console.WriteLine("二进制 111101 的十进制表示: "+Convert.ToInt32(&qu ...
- C语言实现全排列和回溯法总结
一.递归实现全排列 #include"cstdio" ]; void print_permutation(int n,int *A,int cur){ if(cur==n){ ;i ...
- typescript -- ts
算是强类型语言,javascrpt是弱类型语言,是指对数据的类型的处理,弱类型语言的特点有时候只是在支行的时候才告诉你出错了,但写的时候你是查觉不到的 ts也是以es5-7为语法标准的,开发的算是另外 ...
- Delphi导出word
//导出Wordprocedure TFrm_Computing.ExportWord;varwordApp, WordDoc, WrdSelection, wrdtable, wrdtable1, ...
- 什么是DDL,DCL,DML
1.DCL 数据库控制语言,全称是Data Control Language 关键字类型:grant.remove 2.DDL 数据库定义语言,全称是Data Definition Language ...
- VS2013诡异问题，虚方法、泛型，通通躺枪
最近在调代码,发现一个很诡异的问题,简单复原一下 创建4.0控制台项目 以下代码 class Program { static void Main(string[] args) { var item ...
- validate表单校验插件笔记
1validation知识点 1 validation基础 validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- 【javascript】javascript学习之js脚本的解析步骤
将javascript代码加入到HTML代码中,即使用<script>标签的方式有两种:直接嵌入页面中和使用外部js文件. 使用<script>标签嵌入html代码中时,需要指 ...