引っ張って更新
リストを上端で下に引っ張るとインジケータが伸び、閾値を超えて離すと更新スピナーが回って新着が差し込まれる。SNS/ニュースアプリの定番ジェスチャー。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- SNS・ニュースなど新着を先頭に差し込むフィード
- モバイルで更新ボタンを置きたくない一覧
- 上端で引く操作が定着したアプリ風UI
- 避ける場面
- PC中心の画面（発見できない）
- 上端に到達しない長いページの途中
- 更新ボタンを併設しない実装
- 構成要素
- インジケータ
- 矢印／スピナー
- スクロール領域
- 一覧
- 新着行
- 持っている状態
- 通常
- 押下中
- 読み込み中
- キーボード
引く操作はマウス・タッチ専用。代替: 「更新」button に Tab・Enter／Space で同じ更新が走る
- 支援技術
引き量は矢印→反転→↻ の記号で示し、更新中と「新着1件」を sr-only の role=status で告知。更新 button を併設。reduced-motion では回転と新着のフェードを止める
- 動き
引き量を pow(dy,0.85) で減衰し抵抗感を出す。閾値56pxで矢印180°回転 0.2s、更新中は 0.7s 回転、新着行は 0.4s の背景フェード。reduced-motion で停止
原則ヤコブの法則
目的待たせる
デザインの要点
- 引き量は dy の 0.85 乗で減衰させる。等倍で付いてくると「引っ張っている」抵抗感が無く、どこで離せばよいか分からない
- 閾値 56px で矢印を反転させ「離すと更新」を指を離す前に伝える。反転が無いと、離して初めて結果が分かる
- 上端（scrollTop 0）で下へ引いたときだけ preventDefault する。常に奪うと一覧の縦スクロール自体が効かなくなる
- ジェスチャーは発見しにくいので更新ボタンを併設する。PC と読み上げでは引く操作が存在しない
実装メモ
上端（scrollTop===0）で下方向に引いたときだけ、touchmove を passive:false で受けて preventDefault し、ネイティブのスクロール/オーバースクロールを奪って独自のインジケータを出します。引っ張り量は Math.pow(dy,0.85) で減衰させ“抵抗感”を作り、閾値超えで離すとスピナー回転→新着を先頭に差し込みます。PCではマウスのドラッグで擬似再現。実運用では更新処理を fetch などに置き換えてください。
コード（コピーして使えます）
<div class="ptr-frame">
<p class="ptr-status" id="ptr-status" role="status" aria-live="polite"></p>
<div class="ptr-spinner" id="ptr-spinner" aria-hidden="true"><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はドラッグ）<button class="ptr-btn" id="ptr-btn" type="button">更新</button></p>
</div>