Anchored Scrolling
Raycast uses a scrolling threshold for list navigation. The selection moves down to a specific point, then locks in place while the list scrolls, providing a stable visual anchor and a clear sense of boundary when the end is reached.
The interaction is a three-phase sequence. Initially, as you press the down arrow, only the selection highlight moves downwards within the static window. Once the highlight reaches a specific threshold—about 70% of the way down the view—it “locks” its position. From this point on, subsequent down-arrow presses scroll the entire list content upwards, keeping the selected item perfectly anchored at that threshold. This continues until the very last item is fully visible, at which point the scrolling stops, and the selection is free to move again to the final item, now resting flush against the bottom edge.
Why It Works
- Progressive Engagement: The interface doesn't scroll immediately. This reduces distracting motion for small, localized navigations (e.g., moving down two or three items). It only engages the more disruptive full-list scroll when the user demonstrates intent to navigate further down.
- Stable Spatial Anchor: The "lock-in" threshold acts as a predictable anchor for the user's eye. During a long scroll, you don't have to track a moving target; you know exactly where to look. This makes scanning long lists significantly faster and less demanding.
- Tactile Feedback & Finality: The final "docking" of the last item provides a clear, physical-feeling end-stop. There is no ambiguity. The transition from a scrolling state (where the list moves) back to a selection state (where the highlight moves) signals the boundary with absolute clarity.
When to Use This
- In keyboard-driven interfaces with potentially long lists, like command palettes, search results, or file browsers.
- When both short-range (adjusting by 1-2 items) and long-range (scrolling far down) navigation are common.
- For lists with fixed-height items, which allows the scrolling and anchoring to feel consistent and precise.
Where You've Seen It
- VS Code: The Command Palette (CMD+Shift+P) and file search (CMD+P) use this exact multi-phase pattern.
- Linear: The command menu (CMD+K) implements this threshold-based scrolling, optimizing for both speed and clarity.
- Sublime Text: The "Goto Anything" overlay is another classic example from developer tooling that perfects this interaction.
Share Your Thoughts
Have feedback on this detail? We'd love to hear from you.