纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题打赏

前端页面开发或是现在日渐增多的Hybird APP应用开发中,经常遇到模拟原生APP界面效果不佳情况,固定header、footer便是其中一种。

涉及header、footer固定,主体部分可滑动,最初想法一般是

position: fixed

然而,iOS各种下input获取焦点后fixed失效等一系列问题,致使我们不得不选择另辟他径。于是,我们这样玩

* {
    box-sizing: border-box;
    margin: 0;
}
html, body, #app {
    height: 100%;
}
body {
    -webkit-overflow-scrolling: touch;
}
.header,
.footer {
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 100;
}
.header {
    top: 0;
    background: #ff910f;
}
.footer {
    bottom: 0;
    background: #f3f3f3;
}
.content {
    padding: 50px 0;
    overflow: auto;
    height: 100%;
}

似乎是很不错的选择,很多移动端网站以及Hybird APP也都在这样用。然而,还有很多网站或是Hybird APP还是选择了IScroll之类的三方库来模拟,不得不承认的是,类似IScroll使用CSS3来模拟iOS的Bounce效果,很不错,但有时候我们可能不希望使用IScroll这样的库,譬如,只是一个简单的活动页等。这个情况下,我们使用如上结构,似乎可以满足,然而,实际使用中发现,如果网页低于一屏高,header、footer还是会被“带走”,这个情况下,有人建议使用js来阻止body的touch事件,这样由于主要滑动的是.content下面的内容,也不至于整页滑动导致header、footer随滚动而动,但这么暴力的处理往往是不理想的(可能影响其他功能,且页面功能多时,可能出现js加载延迟,页面初始化完第一次还是可以滚动)。

效果大概是这样的:

iOS-scroll-header-footer-1

期望是只有主体部分能够滚动,然而

iOS-scroll-header-footer-2

向上滑动

iOS-scroll-header-footer-3

向下滑动

最近遇到这样的问题,尝试后做了如下小改动,可以零js解决此问题,示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
        }

        html, body, #app {
            height: 100%;
        }

        body {
            -webkit-overflow-scrolling: touch;
        }

        .header,
        .footer {
            position: absolute;
            left: 0;
            right: 0;
            height: 50px;
            z-index: 100;
        }

        .header {
            top: 0;
            background: #ff910f;
        }

        .footer {
            bottom: 0;
            background: #f3f3f3;
        }

        .content {
            position: relative;
            padding: 50px 0;
            overflow: auto;
            height: 100%;
        }

        .content > .scroll-wrap {
            box-sizing: content-box;
            min-height: 100%;
            padding-bottom: 1px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">测试Header</div>
    <div class="content">
        <div class="scroll-wrap">
            主体
        </div>
    </div>
    <div class="footer">测试Footer</div>
</div>
</body>
</html>

很简单,既然js实现可能滞后生效(首次不生效)又可能冲突,那么我们就在css中动点手脚,在.content下加一层min-height为100%+1px的块,如下:

.content > .scroll-wrap {
    box-sizing: content-box;
    min-height: 100%;
    padding-bottom: 1px;
}

浏览器解析的时候始终会认为需要滚动条,而不会触发整个页面的Bounce效果,尝试多个iOS系统,基本没有什么问题,只是1px的差异,遇到处女座可能有点纠结了。

PS:这个方法最终没有用到自己的项目上,因为自己项目是一个动态构建webapp的平台,组件都是第三方开发的,可能会有高度100%的需求,且不希望使用CSS3的vh等来实现全屏高,所以希望主体部分下元素可以继承主体高度,设置min-height后似乎并不合适。但纯粹自己开发网站、Hybird APP的情况,完全可以尝试

纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题
文章《纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题》二维码
  • 微信打赏
  • 支付宝打赏

已有3条评论

  1. ytj1666

    大家好

    2018-03-09 14:44 回复
  2. 重庆SEO

    现在的技术大神越来越多了,很多问题都能逐一解决,谢谢分享

    2017-11-28 17:21 回复
  3. 游客 447

    都是大触,厉害厉害

    2017-11-27 16:11 回复

(必填)

(必填)

(可选)