overscrollBg / COverscrollBg

Safari（特に iOS）のオーバースクロール（ラバーバンド＝端で弾む挙動）でページ上下端に露出する余白を、任意の背景色で塗りつぶす。
fixed の擬似要素（::before / ::after）を viewport の上下に 1枚ずつはみ出させて常時待機させ、バウンドしても地の色が見えないようにする仕組み。
使い方は2通り。関数版 overscrollBg() は JS で <body> にマークアップとスタイルを差し込む（no-build 環境や WordPress の main.js から使う場合向け）。コンポーネント版 <COverscrollBg> はレイアウトに1つ置くだけの宣言的な方法（JS不要）。
効果が見えるのは主に Safari / iOS のラバーバンドスクロール時で、他ブラウザでは見た目に影響しない。

仕組み

viewport の外側（上下）に、背景色で塗った fixed のバーを待機させておく。Safari のバウンドで viewport がずれても、この待機バーが見えるため地の色が露出しない。

オーバースクロール領域の塗り

下は概念図。上下の色帯が :before / :after（通常時は画面外に隠れている）、中央が実際の viewport。

::before（上端の外で待機）

viewport（実際の表示領域）

::after（下端の外で待機）

コードを見る

.for_safari::before,
.for_safari::after {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--overscroll-height, 200px);
  background-color: var(--overscroll-color, #fff);
  z-index: var(--overscroll-z, 99999999);
  pointer-events: none;
  content: '';
}
.for_safari::before { top: calc(-1 * var(--overscroll-height, 200px)); }  /* 画面上端の外 */
.for_safari::after  { bottom: calc(-1 * var(--overscroll-height, 200px)); } /* 画面下端の外 */

overscrollBg Options

Option	Type	Default	Description
`color`	`string`	`'#ffffff'`	オーバースクロール領域の背景色。サイトの地の色に合わせる
`height`	`number \| string`	`200`	上下バーの高さ。number は px、"3rem" 等の単位付き文字列も可
`target`	`Element`	`document.body`	マークアップ（.for_safari）の差し込み先
`zIndex`	`number`	`99999999`	擬似要素の重なり順。既定は最前面

overscrollBg（関数）

JS でマークアップとスタイルを差し込む方式。ビルドツールの無い環境や、テーマの main.js から呼びたい場合に使う。戻り値の関数で撤去できる。

呼び出し例

ページ読み込み時に一度呼ぶだけ。色をサイトの地の色に合わせて指定する。

この効果は Safari / iOS のラバーバンドスクロール時のみ視認できるため、ページ内にインタラクティブなプレビューは用意していない。実機（iOS Safari）で上端・下端を引っ張って確認する。

コードを見る

import { overscrollBg } from 'form-snippets';

// 地の色に合わせて塗る（既定は白・上下200px）
overscrollBg({ color: '#f3f2ed' });

// 解除する場合は戻り値の関数を呼ぶ
const stop = overscrollBg();
// stop();

COverscrollBg Props

Prop	Type	Default	Description
`color`	`string`	`'#ffffff'`	オーバースクロール領域の背景色
`height`	`number \| string`	`200`	上下バーの高さ。number は px、単位付き文字列も可
`zIndex`	`number`	`99999999`	擬似要素の重なり順

COverscrollBg（コンポーネント）

宣言的な方法。共通レイアウト（Layout.astro など）の <body> 直下あたりに1つ置くだけ。JS不要で SSR 出力される。

レイアウトに1つ置くだけ

color にサイトの地の色を渡す。height / zIndex も Props で調整できる。

マークアップ（.for_safari）と CSS を内包する宣言的コンポーネント。関数版と同じ塗りを、JSを書かずに設置できる。

コードを見る

---
import COverscrollBg from 'form-snippets/COverscrollBg.astro';
---

<body>
  <COverscrollBg color="#f3f2ed" />
  <slot />
</body>