ナビ・リスト操作
引っ張って更新
リストを上端で下に引っ張るとインジケータが伸び、閾値を超えて離すと更新スピナーが回って新着が差し込まれる。SNS/ニュースアプリの定番ジェスチャー。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
実装メモ
上端（scrollTop===0）で下方向に引いたときだけ、touchmove を passive:false で受けて preventDefault し、ネイティブのスクロール/オーバースクロールを奪って独自のインジケータを出します。引っ張り量は Math.pow(dy,0.85) で減衰させ“抵抗感”を作り、閾値超えで離すとスピナー回転→新着を先頭に差し込みます。PCではマウスのドラッグで擬似再現。実運用では更新処理を fetch などに置き換えてください。
コード（コピーして使えます）
<div class="ptr-frame">
<div class="ptr-spinner" id="ptr-spinner"><span class="ptr-arrow" id="ptr-arrow">↓</span></div>
<div class="ptr-scroll" id="ptr-scroll">
<ul class="ptr-list" id="ptr-list">
<li class="ptr-row"><span class="ptr-dot"></span>新しいコメントが届きました</li>
<li class="ptr-row"><span class="ptr-dot"></span>山田さんがいいねしました</li>
<li class="ptr-row"><span class="ptr-dot"></span>週末のイベント情報</li>
<li class="ptr-row"><span class="ptr-dot"></span>フォロー中の更新まとめ</li>
<li class="ptr-row"><span class="ptr-dot"></span>おすすめの記事3件</li>
<li class="ptr-row"><span class="ptr-dot"></span>ポイントが付与されました</li>
</ul>
</div>
<p class="ptr-hint">上端で下に引っ張る（PCはドラッグ）</p>
</div>