本文へ移動

§17-02Mobile

Pull to refresh

一覧を引き下げて最新の内容に更新する。

一覧の先頭を引き下げる動作で最新情報を取り込め、更新ボタンを探さずに済む。モバイルのフィードや受信箱で広く期待される操作。

実装のポイント

scrollTop が 0 のときだけ touchmove の移動量でインジケータを引き出し、閾値を超えて離したら更新する。overscroll-behavior: contain でブラウザ標準の更新と競合させない。

特徴
  • ジェスチャー
  • 非同期
  • モック
デモで使っているもの
  • lucide-react
  • Pointer Events

このパターンが効く目的