Webflow sync, pageviews & more.
NEW
Answers

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