Chapter 183: Stop Overscroll Behavior, Including iOS Safari (Helper)
Core Idea
CSS overscroll-behavior: none should be enough to stop rubber-band/bounce scrolling, but iOS Safari ignores it — this helper enforces the same effect with JS by intercepting scroll near the boundaries.
Key Concepts
- Works on either
window/document (page-level) or a specific scrollable element.
- Tracks scroll direction and forcibly clamps
scrollTop near the top/bottom boundary to prevent the native bounce, toggling overflow-y as needed.
- Registers passive:false touch/scroll listeners so it can intervene before the browser's native overscroll kicks in.
Key Takeaways
- Needed specifically as an iOS Safari workaround — other browsers generally respect
overscroll-behavior: none natively.
- Useful when pinning content with ScrollTrigger, where unwanted native bounce can visually fight with a pinned/scrubbed animation.
Connects To
- ScrollTrigger (pin): a common reason to need this, since native overscroll bounce can visually conflict with pinning.