iOSのバウンススクロール時の背景色を上下で異なる色に変える

何がしたいのか

Before

これを

After

こうしたい

Beforeコード

ひとまず全て書き出します。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        /* 表示調整用スタイル */
        * {
            padding: 0;
            margin: 0;
        }
        html, body, .container {
            height: 100%;
        }
        .header, .main, .footer {
            display: block;
        }
        .header {
            height: 50px;
            background-color: lightgreen;
        }
        .main {
            min-height: calc(100% - 100px);
            background-color: white;
        }
        .footer {
            height: 50px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
<div class="container">
    <header class="header">header</header>
    <main class="main">main contents...</main>
    <footer class="footer">footer</footer>
</div>
</body>
</html>

テスト用コンテンツの配置と、コンテンツの高さを調整しています。

CSSを調整していきますので、CSS部分のみ切り出して再度見ておきます。

/* 表示調整用スタイル */
* {
    padding: 0;
    margin: 0;
}
html, body, .container {
    height: 100%;
}
.header, .main, .footer {
    display: block;
}
.header {
    height: 50px;
    background-color: lightgreen;
}
.main {
    min-height: calc(100% - 100px);
    background-color: white;
}
.footer {
    height: 50px;
    background-color: lightgray;
}

ここで重要なのは.header、.main、.footerにそれぞれ背景色が指定されているということです。

Afterコード

/* 表示調整用スタイル */
* {
    padding: 0;
    margin: 0;
}
html, body, .container {
    height: 100%;
}
.header, .main, .footer {
    display: block;
}
.header {
    height: 50px;
    background-color: lightgreen;
}
.main {
    min-height: calc(100% - 100px);
    background-color: white;
}
.footer {
    height: 50px;
    background-color: lightgray;
}
/* バウンススクロール時のカラースタイル */
body::before,
body::after {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    position: fixed;
    left: 0;
    z-index: -1;
}
body::before {
    top: 0;
    background-color: lightgreen;
}
body::after {
    bottom: 0;
    background-color: lightgray;
}

差分は/* バウンススクロール時のカラースタイル */というコメント以降の記述のみです。

要点は

bodyに疑似要素を設定し、上半分を.headerと同じ色に、下半分を.footerと同じ色に設定しfixedで固定配置
疑似要素にz-index: -1;を指定し、.headerや.mainよりも後ろに回り込ませる
bodyは背景色を指定せず（透明）、疑似要素は可視化

です。

これにより、バウンススクロールした時に固定配置された疑似要素が見えるようになり、また上下で異なる色が設定されているように見えます。

バウンススクロールが50%を超えた場合に色の境界が見えてしまいますが、50%を超えることはほぼないと考えています。

最後に

（こんなことやりたい人いる・・・？）