How can I disable scroll bouncing and the rubber band effect at the top and bottom of the page in Webflow, while still allowing pull to refresh on mobile devices? The code I tried only worked in Chrome on Desktop, but not in Safari and it disabled the pull to refresh gesture on Android. Thank you!

TL;DR

Wrap all page content in a div (e.g., main-wrapper) and apply overflow: auto, height: 100vh, and overscroll-behavior: contain.
Avoid applying scroll restrictions to body or html, and use optional JavaScript to prevent bounce in inner scroll areas without blocking mobile pull-to-refresh.

To disable scroll bouncing (rubber banding) in Webflow while still allowing pull-to-refresh on mobile, you need a selective CSS and JavaScript approach, as it's not natively controllable within Webflow’s UI. Safari and Android browsers each handle scroll behavior differently, and most prevent fine-grained control over pull-to-refresh.

1. Target the Right Element for Scroll Locking

Instead of applying scroll lock styles to the default body or html, apply overflow control to a wrapper div that contains all page content.
Create a full-page wrapper in Webflow (e.g., give a div the class main-wrapper) and apply your scroll restrictions there.

2. Prevent Scroll Bounce via CSS (Non-intrusive)

On your main-wrapper, apply the following styles inside Webflow:
Overflow: scroll
Height: 100vh
Overscroll behavior: contain

This setup may look like:

Main-wrapper styles:
overflow: auto
height: 100vh
overscroll-behavior: contain (or overscroll-behavior-y: contain)

This prevents iOS Safari from rubber-banding beyond the top and bottom of the content within the wrapper only, without affecting the browser’s default pull-to-refresh behavior that occurs on the body.

3. Avoid Disabling `overscroll` on `<body>` or `<html>`

Avoid using overflow: hidden or overscroll-behavior: none on <body> or <html>—especially on mobile—because:
It blocks pull-to-refresh on Chrome Android.
It can make the page feel unresponsive to users on touch devices.

4. Apply CSS Only When Needed (Optional)

To control the effect only when wanted (e.g., modals open), you can toggle a class via Webflow interactions or JavaScript:

Example: Add a class like no-bounce to your wrapper when needed.
no-bounce class can include:
overscroll-behavior: none;
Temporarily disable pointer-events or scroll if required.

Use Webflow Interactions or custom JavaScript to apply/remove this class dynamically.

5. Optional JavaScript: Prevent iOS Inner Scroll Bounce

If strict bounce prevention is necessary inside scrollable divs (while still allowing body pull-to-refresh):

Add this JavaScript in the Before Tag section in Webflow:
```js
document.querySelectorAll('.scroll-area').forEach(el => {
el.addEventListener('touchstart', () => {
let top = el.scrollTop === 0;
let bottom = el.scrollHeight - el.scrollTop === el.clientHeight;
```
if (top) {  el.scrollTop = 1;} else if (bottom) {  el.scrollTop -= 1;}
```
});
});
```
Replace .scroll-area with your scrollable div class (e.g., main-wrapper if that’s scrollable).
This avoids iOS from bouncing in inner scroll areas without affecting pull-to-refresh on base body.

Summary

To prevent scroll bouncing in Webflow without disabling mobile pull-to-refresh, wrap your content in a div, apply overflow: auto and overscroll-behavior: contain, and avoid scroll restrictions on the body/html. Use JavaScript only inside inner scroll areas if necessary.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer