How can I fix the issue with scrolling in the modal and prevent the page from scrolling behind on my Webflow site after clicking on parameters with the finsweet cookies solution?
TL;DR
- Add JavaScript to set
overflow: hiddenon<body>when your modal opens to lock background scroll. - Reset
overflowwhen the modal closes, and ensure this doesn't conflict with Finsweet’s cookie modal behavior or z-index stacking.
If you're using Finsweet's Cookie Consent and encountering scrolling issues with modals—for example, the modal scrolls correctly but the page behind also scrolls—this is usually due to missing or improperly applied overflow control on the body or html tags.
1. Set Overflow Hidden on Modal Open
- When a modal opens, the background page should be locked from scrolling.
- Add a custom script to set
overflow: hiddenon the<body>when the modal is active. - In Webflow Interactions, add a step to run custom code using "Run JavaScript":
- Example:
document.body.style.overflow = 'hidden';
2. Release Overflow on Modal Close
- When the modal is closed, re-enable scrolling by resetting
overflowtoautoor"": - Example:
document.body.style.overflow = ''; - This should be applied in the close trigger interaction.
3. Account for Finsweet Cookies Injection
- Finsweet's cookie manager may inject modals or banners dynamically, which can affect scroll behavior on modals you open after cookie interactions.
- Ensure you're not re-enabling overflow too early (e.g., Finsweet closes modals automatically).
- Wait until the Finsweet cookie modal is fully dismissed before enabling scroll on the background.
4. Use Webflow’s Modal Best Practices
- Double-check all modal elements:
- Set modal wrapper to fixed, 100vh height, overflow: auto.
- Disable page scroll only when your specific modal is active, not when just any modal (like Finsweet’s) is active.
- Add a conditional class or data attribute to distinguish your custom modal from the Finsweet one.
5. Resolve Z-Index Conflicts
- Make sure your modal has a higher z-index than the Finsweet cookie modal—especially if the order affects the interaction flow.
Summary
To prevent background scrolling when using modals on a Webflow site with Finsweet Cookies, lock document scroll by setting overflow: hidden on <body> when the modal opens, and reset it when the modal closes. Also, ensure no conflict with Finsweet’s injected elements, especially regarding scroll behavior and z-index stacking.