スナップ位置のあるシート
地図の上に重なるシートを、ハンドルのドラッグで「閉じる／半分／全画面」の 3 段階に止める。離した位置と速さで最寄りの段へ吸い付き、全画面のときだけ中身がスクロールする。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 段は 3 つまで。閉じた状態でも見出しと 1 行が見える高さ（ピーク）を残し、シートの存在を消さない
- 離したときは最寄りの段へ吸い付く。ただし速いフリックは距離に関係なく次の段へ送ると、指の意図に合う
- 中身のスクロールは全画面のときだけ許す。半分の状態でスクロールできると、シートの引き上げと取り合いになる
- ドラッグはハンドルとヘッダーで受ける。本文で受けるとリンクやボタンのタップと衝突する
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
段の位置は translateY の % で持ち、シート自体は常に全高（height:100%）です。閉じた段は「ピーク 72px」を残す計算にしているので、枠の高さが変わっても見出しが隠れません。実装では地図側の操作とシートのドラッグが競合しないよう、ドラッグの受け口をハンドル＋ヘッダー（.ssp-grab）に限定しています。
コード（コピーして使えます）
<div class="ssp-phone" id="ssp-phone">
<div class="ssp-map" aria-hidden="true">
<span class="ssp-pin"></span>
</div>
<section class="ssp-sheet" id="ssp-sheet" aria-label="周辺の店舗">
<div class="ssp-grab" id="ssp-grab">
<button class="ssp-handle" type="button" id="ssp-handle" aria-label="シートの高さを切り替える"></button>
<div class="ssp-head">
<h2 class="ssp-title">周辺の店舗</h2>
<span class="ssp-meta" id="ssp-state">半分</span>
</div>
</div>
<div class="ssp-content" id="ssp-content">
<ul class="ssp-list">
<li class="ssp-item"><span class="ssp-name">ミナト工房 港南店</span><span class="ssp-sub">徒歩 4 分 ・ 営業中 〜19:00</span></li>
<li class="ssp-item"><span class="ssp-name">コーヒースタンド 灯</span><span class="ssp-sub">徒歩 6 分 ・ 営業中 〜21:00</span></li>
<li class="ssp-item"><span class="ssp-name">本と道具 ひなた</span><span class="ssp-sub">徒歩 9 分 ・ 本日休業</span></li>
<li class="ssp-item"><span class="ssp-name">港南市民ホール</span><span class="ssp-sub">徒歩 12 分 ・ 9:00〜22:00</span></li>
<li class="ssp-item"><span class="ssp-name">中央公園 売店</span><span class="ssp-sub">徒歩 14 分 ・ 営業中 〜17:00</span></li>
<li class="ssp-item"><span class="ssp-name">自転車修理 ふじ</span><span class="ssp-sub">徒歩 15 分 ・ 営業中 〜18:00</span></li>
<li class="ssp-item"><span class="ssp-name">港南駅 観光案内所</span><span class="ssp-sub">徒歩 18 分 ・ 9:00〜17:00</span></li>
</ul>
</div>
</section>
</div>