Stop the Over-Scroll

Mobile Scroll Lock: The "No-Bounce" Override

Give your Framer sites a truly native app feel by eliminating the distracting "rubber-band" elastic scrolling on mobile devices.

The Problem

By default, mobile browsers (Safari and Chrome) allow users to pull the page past its boundaries, revealing the browser's background color or triggering an accidental "pull-to-refresh." This often breaks the immersion of fixed navigation bars and makes web apps feel unpolished.

The Solution

This simple, high-performance code override applies overscroll-behavior: none to your project. It locks the viewport in place, ensuring that your top and bottom navigation bars stay exactly where they belong—no more bouncing, no more "gray gaps," and no more accidental refreshes.

How to Use

1. Copy the code file.

2. Create a New Code File in your Framer project's "Code" section.

3. Paste the Code and save.

4. Apply the withNoOverscroll override to your Layout Template Page or main Breakpoint.

5. Publish and enjoy a rock-solid mobile experience.

Pro Tip: Perfect for portfolios, dashboards, and landing pages with fixed navigation or bottom bars.