IOS系统滚动出现白边

H5页面中,有个很常见的效果,就是自定义的弹窗,而一般在弹窗出现时,就会有一个部分透明的背景,但是你是否在IOS的设置上,碰到过这样的一种情况?

1:状况描述

IOS的系统上,在弹窗的状态下,快速滚动页面,会在底部或者顶部,出现一个白条,即:半透明浮层盖不住的地方,还是来直接看看示例吧。

这里呢,就以最简单的例子来看一下,最简单的HTML结构,最简单的CSS结构

比如,这里的浮层,我只使用一个元素:


<div class = "overlay"></div>


它是覆盖全屏幕的,所以要给他设置一个样式,因为它又不能随着页面的滚动而滚动,所以,需要设置的样式如下:


.overlay{
    position:fixed;
    top:0%;
    right:0px;
    bottom:0%;
    left:0px;
    background-color:rgba(0,0,0,0.4);
}


那么,我们来看看示例吧:

如果您在使用PC,可以扫码:

也可以直接点击:BUG的DEMO.

这个情况,只在IOS的手机下才会出现。

2:原因

相信使用IOS手机的人,都知道这么一个现象,如果页面上有动态图,或者其他的一直变化的东西(比如计时器等),而这个时候,当你的手指触碰到屏幕的时候,你所能看到的动态图,就变得静止了,原因可以参考这篇文章中说的:CSS3 动画在 iOS 上为什么会因为页面滚动也停止

文中的意思,基本是这样的:IOSUI事件处理机制,为了保证流畅性,在手指触摸到屏幕的时候,就会停止浏览器的重绘和JS的执行,如果说重绘我们比较难以去用示例测试的话,那么写一个延时执行的函数,可以很容易的测试出来,计时器都是出于停止的状态。

并且在IOS的惯性滚动的过程中,这个状态是不会改变的,直到滚动停止,才会把之前需要渲染的渲染出来,JS也才会继续执行。

那么,这个就是前面出现白边的原因吗?有这方面的原因,但不全是

如果您经常使用IOSSafari浏览器上网的话,那么您是否注意到过这样一种状态,当您滚动页面,看下面的内容时,浏览器头部的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,可以扫码:

也可以直接点击:CSS解决方案DEMO

2:使用Html布局和CSS配合

前面的只是使用了CSS设置弹层的高度,比可视高度更高即可。还有一种方法,利用的和前文一样的一个概念,单屏布局方法,

之所以浏览器会把地址输入缩小,把底部的工具栏隐藏,有一个原因就是,为了能看到更多的内容,可以把视图变得更大,那么前面一个解决方案是把覆盖的区域,在可视高度上,变得更大一些,那么还有一个解决方案就是:我的内容区域,不大于一屏(单屏布局模式)不就可以了么?

所以,可以如下设置底部布局模式:

HTML部分:


<div class = "overlay"></div>
<div class="wrapper">
<p>快速滚动,底部留白的问题</p>
<p>
CSS的设置,只更改bottom:-100px;
</p>
<p style = "height:2000px;">
控制中间区域的部分
</p>
<p>到底了

</div>

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的系统,所以仅供参考。

本篇到此为止。

如果您发现文中有描述错误或者不当的地方,请留言指出,不胜感激,谢谢!

本文属于原创文章,如需转载,请注明出处,谢谢!

本文地址:http://www.zhangyunling.com/?p=638

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>