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 content in a full-page scroll container (#main-wrapper) with overflow-y: auto, overscroll-behavior: contain, and -webkit-overflow-scrolling: touch.
Set html and body to overflow: hidden and overscroll-behavior: none to disable bounce at the root while preserving pull-to-refresh inside the scroll container.

To disable scroll bouncing (rubber banding) at the top and bottom of a Webflow site without breaking pull-to-refresh on mobile devices, you need to apply very specific scroll control techniques compatible with mobile Safari and Chrome.

1. Understand What's Happening

Scroll bounce (or rubber band effect) is native to iOS Safari and Android Chrome.
overflow: hidden on <body> or <html> usually prevents bounce but also disables pull-to-refresh, which you want to preserve.
Webflow doesn't provide native settings to control this precisely, so custom CSS and JS are required, applied carefully.

2. Apply CSS to Contain Overscroll

Use this CSS to limit overscroll to a specific container instead of completely disabling it:

Add a full-page wrapper div (e.g., #main-wrapper) around all your content.
Set the following CSS in your Webflow Project Settings → Custom Code → Inside <head>:

<style>
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #main-wrapper {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
</style>

3. Allow Pull-to-Refresh on Android and iOS

Only limit bounce inside your custom #main-wrapper, but allow the native browser overscroll at the root level.
To retain pull-to-refresh, use overscroll-behavior: contain on the scroll container, not none on body/html. This blocks the bounce but keeps the browser’s own behaviors.

Important:

Don't set overflow: hidden on body and html unless you move actual scrolling to a container like #main-wrapper.
-webkit-overflow-scrolling: touch; is important for smooth scrolling on iOS.

4. Create the Scroll Container in Webflow

In the Webflow Designer:

Add a div block and name it main-wrapper.
Place all other sections/components inside this div.
Set main-wrapper to:
Display: Block
Height: 100%
Overflow: Auto

5. Disable Temporary Tap Delay in Safari (Optional)

If you encounter “rubber banding” still due to 300ms taps or weird tapping behaviors:

Add this meta tag in Custom Code → Inside <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Summary

To suppress scroll rubber-band effect in Webflow while keeping mobile pull-to-refresh:

Create a full-page scroll container (#main-wrapper) and move overflow behavior into it.
Disable body overflow and set overscroll-behavior: contain on your wrapper.
Use -webkit-overflow-scrolling: touch for smooth iOS scrolling.
Avoid using overflow: hidden on body unless you're redirecting scrolling inside a container.

This approach works across Safari, Chrome, and mobile browsers without disabling pull-to-refresh.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer