如何关闭ios中网页iframe左右回弹效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何关闭ios中网页iframe左右回弹效果相关的知识，希望对你有一定的参考价值。
如何关闭ios中网页iframe左右回弹效果
参考技术A <!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>Demo</title>
<style>
html,body
width: 100% 100%; height: 100% 100%; position: fixed fixed;top:00;left:00;
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中网页iframe左右回弹效果的主要内容，如果未能解决你的问题，请参考以下文章
ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS，把阻尼回弹限制在滚动区div内