Webflow sync, pageviews & more.
NEW

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

To disable scroll bouncing and the rubber band effect at the top and bottom of the page in Webflow, you can use some custom CSS along with a little JavaScript. However, it's important to note that completely disabling the pull-to-refresh gesture on mobile devices may not be possible due to browser restrictions.

Here's a step-by-step guide to achieving this:

1. In your Webflow project, go to the Designer and navigate to the page where you want to disable the scroll bouncing and rubber band effect.

2. Select the `` element from the Navigator panel.

3. In the right-side Style panel, click on the "+ Add Custom Code" button.

4. Add the following CSS code to the "Head" section:

```css
body {
overscroll-behavior: none;
touch-action: pan-down;
}
```

The `overscroll-behavior: none;` property disables the scroll bouncing effect, and `touch-action: pan-down;` specifies that the user should be able to pan down (pull to refresh) on touch devices.

5. Now, you need to add some JavaScript to additionally handle the pull-to-refresh functionality. Place the following code inside an HTML Embed element or a custom JavaScript file:

```javascript
// Disable pull-to-refresh if overscroll occurs
window.addEventListener('touchmove', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });

// Restore normal touchmove behavior after pull-to-refresh completes
window.addEventListener('touchend', function() {
setTimeout(function() {
window.scrollTo(0, 0);
}, 0);
});
```

This JavaScript code prevents the default behavior of the touchmove event when multiple touches are detected (which usually triggers the pull-to-refresh gesture). Additionally, it restores the scroll position to the top of the page after the pull-to-refresh completes.

6. Publish or export your site and test it on various devices and browsers, including desktop and mobile. Scroll bouncing should be disabled, while the pull-to-refresh gesture should still be functional on supported devices.

Please note that due to browser variations and restrictions, disabling the pull-to-refresh gesture universally across all devices may not be possible. The code provided should work on most modern browsers, but some browsers may not respect the `touch-action` property or allow complete customization of the pull-to-refresh behavior.

Rate this answer

Other Webflow Questions