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!

To disable scroll bouncing (rubber banding) in Webflow while still keeping pull-to-refresh on mobile browsers, you need to apply the correct CSS strategy that targets only body scroll elasticity—without overriding native browser behavior like pull-to-refresh.

1. Understand Platform Limitations

• Safari (iOS) applies rubber-band scrolling at the viewport level, not on scrollable containers.
• Android (Chrome) allows better control via scroll containers, but disabling overscroll completely disables pull-to-refresh, which you want to keep.
• Unfortunately, you cannot prevent scroll bounce globally on iOS Safari without also disabling pull-to-refresh, as they're tied together.

2. Use overscroll-behavior Strategically

You can limit where bouncing happens using overscroll-behavior, but note that this won’t affect Safari iOS, which still does bounce unless you hack around with a fixed container (but that breaks pull-to-refresh).

Apply the following CSS in your Webflow Page Settings → Custom Code → Inside <style> tags in the Head:

body, html {  overscroll-behavior-y: contain; /* limits bounce at top/bottom, but disables pull-to-refresh on Android */}

But since this disables pull-to-refresh on Android, instead target only elements other than the body:

3. Apply to Scrollable Containers Only

Keep scroll containers from bouncing while leaving the body scroll behavior untouched:

.scroll-container {  overscroll-behavior: none;}

• Add the class scroll-container to divs or sections that have overflow: auto or scroll behavior.
• Leave the main body and html unchanged, so native pull-to-refresh still works.

4. Safari-Specific Notes

• iOS Safari: No perfect solution. Rubber banding at the top/bottom of the page cannot be disabled on body without also using methods that kill pull-to-refresh (like overflow: hidden on html, or breaking into fixed containers).
• There is no browser API that allows disabling bounce while preserving pull-to-refresh in iOS Safari.

5. Avoid Common Mistakes

• Don't set overflow: hidden on html or body—this disables scrolling and also kills pull-to-refresh.
• Avoid JavaScript hacks that set touch-action: none, as that disables key gestures on mobile.
• Avoid using full-page wrappers with overflow: scroll and height: 100vh—this disables native mechanisms and worsens performance/accessibility.

Summary

To limit scroll bounce in Webflow:

• Use overscroll-behavior: none only on scrollable containers, not the body, to prevent container bounce while preserving native behavior.
• Accept iOS Safari limitations: scroll bounce and pull-to-refresh are linked; you can’t disable one without the other.
• There is no cross-browser way to disable rubber band effect while keeping pull-to-refresh intact, especially on iOS. Stick with local container control instead.