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

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

## 何がしたいのか

### Before

<img src="https://camo.qiitausercontent.com/b7a18fa9c100099355d478900fad24d000810fb3/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3130303138382f31396336653262302d316263612d653561632d363432612d6463633638356530633832382e676966" alt="start.gif" data-canonical-src="https://qiita-image-store.s3.amazonaws.com/0/100188/19c6e2b0-1bca-e5ac-642a-dcc685e0c828.gif" width="320">

これを

### After

<img src="https://camo.qiitausercontent.com/e6e50a1408222f0e851fc818da39e026ae7f25aa/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3130303138382f35363730313338372d336366312d366464342d396134652d6539343639613336653462302e676966" alt="after.gif" data-canonical-src="https://qiita-image-store.s3.amazonaws.com/0/100188/56701387-3cf1-6dd4-9a4e-e9469a36e4b0.gif" width="320">

こうしたい

## Beforeコード

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

```html
<!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部分のみ切り出して再度見ておきます。

```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コード

```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;
}
/* バウンススクロール時のカラースタイル */
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%を超えることはほぼないと考えています。

## 最後に

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