§17-02Mobile
Pull to refresh
一覧を引き下げて最新の内容に更新する。
一覧の先頭を引き下げる動作で最新情報を取り込め、更新ボタンを探さずに済む。モバイルのフィードや受信箱で広く期待される操作。
実装のポイント
scrollTop が 0 のときだけ touchmove の移動量でインジケータを引き出し、閾値を超えて離したら更新する。overscroll-behavior: contain でブラウザ標準の更新と競合させない。
- 特徴
- ジェスチャー
- 非同期
- モック
- デモで使っているもの
- lucide-react
- Pointer Events