Preventing drag overscrolling behavior (Rubber Band) on macOS

24 May 2023

Elastic (Rubber Band) scrolling in macOS can make your website look quirky if you have a background image or animation with a blurry block on top for example

The animation will appear at the top when you pull the page down by dragging two fingers on the trackpad for example, not nice at all

Here’s an example from this website (background blob rotating animation behind a blurry block)

Vertical overscroll can be disabled on macOS by running the following command:

defaults write -g NSScrollViewRubberbanding -int 0

Tested on Monterey and Lion (must restart chrome)

But to solve this problem on the web both horizontal & vertical:

hide horizontal overflow and prevent overscroll behavior vertically by using the overscroll-behavior-y CSS property on the HTML element

html {
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

Preventing drag overscrolling behavior (Rubber Band) on macOS

Vertical overscroll can be disabled on macOS by running the following command:

But to solve this problem on the web both horizontal & vertical:

Other Posts_

Pagination component designed in Tailwind CSS for Inertia's Vue 3 adapter

Preventing drag overscrolling behavior (Rubber Band) on macOS

Eager loading roles with users in Spatie Laravel permissions

Setup Jekyll runtime with Docker

Array destructuring in ES6+ JavaScript

Understanding Unix Change Mode (chmod)

Automate pull request review assignment on GitHub via actions

Harnessing Vue 3's Recursive Component Tree for Dynamic UIs