Pull to Refresh
下拉刷新
Aliases:Pull to Refresh下拉刷新下拉更新拉动刷新手势刷新下拉加载最新
What is it
Press at the top of a list and drag downward: an indicator tracks the pull distance, and releasing past a threshold refetches the latest data. It solves the "content may be stale" problem — the user requests a refresh deliberately and predictably, staying in control of both timing and outcome instead of waiting for background polling.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Mobile timelines, inboxes and activity feeds
- Content with freshness needs but no polling requirement
- Users already trained by iOS / Android conventions
✕ When not to use
- Desktop mouse environments — the gesture feels unnatural
- Important sticky top actions that a pull would disrupt
- High-frequency data — prefer auto-sync or push updates
Variants
Tracked spinner
指示器跟随
Indicator position and rotation track the pull; flips past the threshold
Text hint
文字提示
Two-stage copy — pull to refresh / release to refresh
Skeleton handoff
骨架接管
After release, a skeleton bridges into the refreshed content
Implementation
touch-actionoverscroll-behaviortransformtransitionTake over the gesture only when scrollTop is 0: listen to touchmove with passive: false so preventDefault works, map pull distance through a damping factor to the indicator offset, and on release past the threshold enter the refreshing state with a lock until done, then spring back. Use pointer events for mouse-driven desktop demos. Add overscroll-behavior: contain so the outer page doesn't scroll along.
Compare
Full comparison →| Pull to Refresh下拉刷新 | Pagination分页 | Infinite Scroll无限滚动 | |
|---|---|---|---|
| Trigger | Deliberate pull gesture by the user | Explicit clicks on page numbers | Automatic — fires at scroll bottom |
| Data control | User-initiated request for fresh data | Strong — the user holds the position | System-paced — user passively receives more |
| Suitable content | Feeds and messages needing a manual refresh | Ordered, addressable result sets | Browsing-oriented feeds and timelines |
Related concepts
Replaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsAlternativeA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsAlternativeA continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
MotionUsed withGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsSimilarA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsUsed with