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) 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.