How can I add the scroll bounce effect to my Webflow website?
TL;DR
- To add a scroll bounce effect in Webflow, use custom CSS with
body { -webkit-overflow-scrolling: touch; overflow-y: scroll; }. - Apply this in the Project Settings under Custom Code, publish, and test on mobile devices.
Adding a scroll bounce effect to your Webflow website involves using custom code since Webflow doesn't provide a built-in option for this effect.
1. Understand the Purpose
- The scroll bounce effect gives a visual cue when users scroll beyond the content boundaries, commonly seen on iOS devices.
- This effect adds a touch of playfulness and interactive feedback to your website.
2. Use Custom CSS
- Webflow allows you to add custom code to your project settings or directly on individual pages.
- To achieve the scroll bounce effect, you’ll need to use CSS to mimic this behavior.
3. Add the CSS to Webflow
- Go to Project Settings from your Webflow dashboard.
- Navigate to the Custom Code tab.
- In the Inside Head Tag section, add the following CSS:
- body { -webkit-overflow-scrolling: touch; overflow-y: scroll; }
- This line of code enables the elastic scroll effect on touch devices.
4. Publish and Test
- Publish your changes to see the scroll bounce effect in action.
- Test on different devices, especially mobile ones, to ensure the effect displays correctly.
Summary
To add the scroll bounce effect to your Webflow site, use custom CSS that changes scrolling behavior on touch devices. Add -webkit-overflow-scrolling: touch; to the body in your custom code settings, then publish and test to verify the results.