Overscroll Behavior

1---
2name: overscroll-behavior
3description: >
4  Kill the macOS/desktop rubber-band overscroll bounce without breaking mobile pull-to-refresh,
5  by setting `overscroll-behavior: none` on the root scroller gated behind `@media (pointer: fine)`
6  (the pattern Vercel ships). Also covers `overscroll-behavior: contain` for modals, drawers,
7  sidebars, and other nested scroll areas to stop scroll chaining. Triggers whenever building or
8  reviewing a root layout, global CSS (globals.css, app/layout.tsx, _document, index.css), app
9  shells, dashboards, full-height/fixed-viewport UIs, chat or editor layouts, scrollable panels,
10  modals, sheets, or when the user mentions overscroll, rubber-band, bounce, elastic scroll,
11  scroll chaining, pull-to-refresh, or "the page bounces on my trackpad".
12---
13
14# Overscroll Behavior — No Bounce on Desktop, Pull-to-Refresh on Mobile
15
16**RULE: Disable root overscroll only for fine pointers. Never disable it for touch.**
17
18```css
19@media (pointer: fine) {
20  html,
21  body {
22    overscroll-behavior: none;
23  }
24}
25```
26
27- `overscroll-behavior: none` stops the elastic rubber-band bounce when a trackpad or mouse
28  scrolls past the top or bottom of the page. App-like UIs (dashboards, editors, sticky
29  headers, fixed sidebars) stop showing a blank gap or a dragged-off header.
30- `(pointer: fine)` means the **primary** input is a mouse or trackpad. Phones and tablets report
31  `pointer: coarse`, so the rule does not apply there and **pull-to-refresh keeps working**.
32- On Chrome desktop, `none` on the root also blocks the horizontal swipe back/forward gesture.
33  That is usually fine for app UIs. If you want to keep it, set only the vertical axis:
34  `overscroll-behavior-y: none`.
35
36## Why the gate matters
37
38An ungated `html { overscroll-behavior: none }` removes pull-to-refresh on Android Chrome and
39iOS Safari. Mobile users lose a gesture they expect, and nothing tells them why. The media
40query keeps the fix on the devices that have the problem.
41
42## Placement
43
44The root scroller is the viewport, which reads the value from `html`. Put the rule in global
45CSS, once. Include `body` too because it is harmless and covers layouts where `body` is the
46scroll container.
47
48### Tailwind v4.1+
49
50Use the built-in `pointer-fine` variant on the root element:
51
52```tsx
53// app/layout.tsx
54<html lang="en" className="pointer-fine:overscroll-none">
55  <body className="pointer-fine:overscroll-none">{children}</body>
56</html>
57```
58
59Or in `globals.css`:
60