ios html有虚边,IOS系统滚动出现白边
H5页面中，有个很常见的效果，就是自定义的弹窗，而一般在弹窗出现时，就会有一个部分透明的背景，但是你是否在IOS的设置上，碰到过这样的一种情况？
1：状况描述
在IOS的系统上，在弹窗的状态下，快速滚动页面，会在底部或者顶部，出现一个白条，即：半透明浮层盖不住的地方，还是来直接看看示例吧。
这里呢，就以最简单的例子来看一下，最简单的HTML结构，最简单的CSS结构
比如，这里的浮层，我只使用一个元素：
它是覆盖全屏幕的，所以要给他设置一个样式，因为它又不能随着页面的滚动而滚动，所以，需要设置的样式如下：
.overlay{
position:fixed;
top:0%;
right:0px;
bottom:0%;
left:0px;
background-color:rgba(0,0,0,0.4);
}
那么，我们来看看示例吧：
如果您在使用PC，可以扫码：
这个情况，只在IOS的手机下才会出现。
2：原因
相信使用IOS手机的人，都知道这么一个现象，如果页面上有动态图，或者其他的一直变化的东西(比如计时器等)，而这个时候，当你的手指触碰到屏幕的时候，你所能看到的动态图，就变得静止了，原因可以参考这篇文章中说的：CSS3 动画在 iOS 上为什么会因为页面滚动也停止；
文中的意思，基本是这样的：IOS的UI事件处理机制，为了保证流畅性，在手指触摸到屏幕的时候，就会停止浏览器的重绘和JS的执行，如果说重绘我们比较难以去用示例测试的话，那么写一个延时执行的函数，可以很容易的测试出来，计时器都是出于停止的状态。
并且在IOS的惯性滚动的过程中，这个状态是不会改变的，直到滚动停止，才会把之前需要渲染的渲染出来，JS也才会继续执行。
那么，这个就是前面出现白边的原因吗？有这方面的原因，但不全是
如果您经常使用IOS的Safari浏览器上网的话，那么您是否注意到过这样一种状态，当您滚动页面，看下面的内容时，浏览器头部的url输入框和底部的工具栏，都会变小，从而增大设备的可视高度，在同一个设备上，可以查看到更多的内容，这个时候的浏览器的可视区域的高度，和前面是不相同的。
那么问题来了，当快速滚动时，这个高度是否就是浏览器可视区域变化时，产生的呢？
答案是这样的，就是这两个原因，才导致的这个问题的出现，在快速滚动时，IOS的设备是停止渲染的，那么就是说，前面的CSS样式的设置的浮层的高度，就已经被限制掉了，那么在改变之前，这个高度就是浏览器之前的可视区域的高度，
当快速滚动时，浏览器为了能给可视区域更大的高度，使用户能能在设备的一屏上，看到更多的内容，增加了可视区域的高度，但是由于还在滚动，所以就导致CSS不能重新渲染，那么高度就差出来了，也就是这个白边就出来了。
也就是前面示例中看到的情况了。
3：解决方案
这些东西，只要知道了原因，那么其实就等于有了解决方案，所以，这里的解决方案，在我想来，可以分为两种，接下来就分别说一下：
1：使用CSS，增加这个浮层的高度，既然在滚动的时候，少了这一段，那么我们直接就在初始化的时候，增加这一段基本就可以了，但是呢，这个增加的方法，就得要好好考虑一下了，比如下面的两种CSS设置，其实都是可以做到这个效果的。
/*方法1*/
.overlay{
position:fixed;
top:0%;
right:0px;
bottom:-100px;
left:0px;
background-color:rgba(0,0,0,0.4);
}
方法1中，只设置了bottom为负值，因为在前面的理论以及前面的测试中，也发现了一个现在，这个只是在快速向下滚动时，在浏览器的底部出现留白的情况，而在向上滚动时，是没有这个现象的，所以只需要设置bottom:-100px即可。
/*方法2*/
.overlay{
position:fixed;
top:-100px;
right:0px;
bottom:-100px;
left:0px;
background-color:rgba(0,0,0,0.4);
}
那么为什么还要有方法2呢？这个主要是因为，在这个场景经常出现的时候，弹层的内容区域，经常会要求上下居中，如果您只是设置了bottom的值，那么在上下居中的处理中，就会变得有些困难了，所以，这里更推荐使用方法2。
但就本质上来说，他们的解决方案是完全相同的，只是方法2更适合之后的扩展。
所以可以查看示例(示例是用的方法1的css)：
如果您在使用PC，可以扫码：
2：使用Html布局和CSS配合
前面的只是使用了CSS设置弹层的高度，比可视高度更高即可。还有一种方法，利用的和前文一样的一个概念，单屏布局方法，
之所以浏览器会把地址输入缩小，把底部的工具栏隐藏，有一个原因就是，为了能看到更多的内容，可以把视图变得更大，那么前面一个解决方案是把覆盖的区域，在可视高度上，变得更大一些，那么还有一个解决方案就是：我的内容区域，不大于一屏(单屏布局模式)不就可以了么？
所以，可以如下设置底部布局模式：
HTML部分：
快速滚动，底部留白的问题
CSS的设置，只更改bottom:-100px;
控制中间区域的部分
到底了
CSS部分：
.overlay{
position:fixed;
top:0%;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.4);
}
.wrapper{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:auto;
-webkit-overflow-scrolling : touch;
}
所有的内容，都是在wrapper元素内部的，而wrapper的元素，直接就是固定布局的元素。
这样，因为两个子元素都是定位的，body的高度是0px的。
所有来看看示例吧：
如果您在使用PC，可以扫码：
也可以直接点击：单屏布局解决方案
而且，如果您仔细看的话，还会发现一个问题，使用单屏布局的话，那么输入框和底部的工具栏，在浏览器内部，是会一直存在的，所以，如果您是在APP内部使用的页面的话，那么这种布局方式，还是很不错的哦。
而如果直接在浏览器内部也会使用的话，底部工具栏不会留白，那么可视区域的高度，不会变大，这个就看个人是否接受了。
总结
本篇文章的内容，测试的IOS系统是IOS8的系统，由于设备限制，并没有能测试每一个IOS的系统，所以仅供参考。
本篇到此为止。
如果您发现文中有描述错误或者不当的地方，请留言指出，不胜感激，谢谢！
本文属于原创文章，如需转载，请注明出处，谢谢！