关于iPhone的Safari浏览器中 单页应用会来回滚动的问题
界面设计

关于iPhone的Safari浏览器中 单页应用会来回滚动的问题

这篇文章记录一下工作中解决的一个CSS问题。

正常情况下,网页的内容超出了窗口大小后,浏览器是可以让用户滚动的。

现代的手机浏览器也可以在网页内容很大时,允许用户进行拖拽和缩放。

但有的时候,我们设计了一个单页面网页应用,我们希望这个页面仅仅保持浏览器窗口的大小,而不允许用户上下左右地滑动。

比如说,我有一个这样的页面:

01

它后面的背景是一张比窗口要大得多的图片,如果我们不做样式限定,那么很可能用户来回拖拽一下就会让网页四处漂移,就像下面这样:

02

这时候,通常的做法是用这样的CSS写法:

body,html {
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

原本以为添加了overflow:hidden这个属性,就可以达到效果,但是在iPhone的Safari浏览器中,还是会出现这种情况:

解决方法是,添加一行position: fixed,如下:

body,html {
    position : fixed;
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

这样,就在iPhone上达到了我们想要的效果:
03

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

文章归档