純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隨頁面滾動問題》二維碼
  • 微信打賞
  • 支付寶打賞

已有5條評論

  1. 五子棋

    現在都是厲害的人物,感謝分享

    2019-03-22 09:05 回復
  2. 武漢佛珠手串

    博客文章很受歡迎啊,有的訪問量都是達2000多,評論也有幾十個。

    另外問下博主:你的這個主題還不錯,不知能否分享,如果能指點下哪里可以下載,十分感謝。。。。。

    2018-12-12 10:13 回復
  3. ytj1666

    大家好

    2018-03-09 14:44 回復
  4. 重慶SEO

    現在的技術大神越來越多了,很多問題都能逐一解決,謝謝分享

    2017-11-28 17:21 回復
  5. 游客 447

    都是大觸,厲害厲害

    2017-11-27 16:11 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖