通知・オーバーレイ
ドラッグ式ボトムシート
画面下からせり出すシート。ハンドルをドラッグして「半分／全開／閉じる」の3段階にスナップする。iOS/AndroidのモバイルUI定番。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
実装メモ
ハンドルの pointerdown でドラッグを開始し、move/up は document で受けて（指がハンドルから外れても追従）シートの translateY を直接更新、離した瞬間に最寄りのスナップ点（全開0 / 半分120 / 閉じ240px）へ transition で吸着させます。ドラッグ中は transition を切って指に追従、スナップ時だけ効かせるのがなめらかさの要点。ハンドルとシートに touch-action:none を付け、縦ドラッグが枠のスクロールと競合しないようにしています。背景の暗さはシートの開き具合に連動します。
コード（コピーして使えます）
<div class="bs-screen" id="bs-screen">
<div class="bs-content">
<button class="bs-open" id="bs-open">シートを開く</button>
</div>
<div class="bs-backdrop" id="bs-backdrop"></div>
<div class="bs-sheet" id="bs-sheet">
<div class="bs-handle" id="bs-handle"><span></span></div>
<div class="bs-inner">
<h3>共有する</h3>
<ul class="bs-list">
<li><span class="bs-ic">🔗</span>リンクをコピー</li>
<li><span class="bs-ic">✉️</span>メールで送る</li>
<li><span class="bs-ic">💬</span>メッセージ</li>
<li><span class="bs-ic">⭐</span>お気に入りに追加</li>
<li><span class="bs-ic">⬇️</span>ダウンロード</li>
</ul>
</div>
</div>
</div>