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

Use custom JavaScript to apply body.style.overflow = 'hidden' when the modal opens and remove it when the modal closes.
Detect modal triggers via Finsweet cookies or URL parameters, and lock scroll accordingly by integrating conditional JS checks.

You're encountering scrolling issues in a modal where the background page continues to scroll after opening it, especially when using Finsweet’s Cookie Consent or other parameter-based logic.

1. Understand the Cause

When triggering a modal with Finsweet’s Cookie Consent or URL parameters (e.g., ?show-modal=true), Webflow may not automatically disable body scrolling.
The expected behavior is: When a modal opens, body scroll should be locked to prevent background scrolling.

2. Use `overflow: hidden` on Body

Webflow does not natively allow applying styles to the <body> element in interactions.
Instead, use Finsweet’s body-scroll-lock method or custom JS to manually disable scrolling.

3. Add Custom Code to Lock Scroll

Go to your Page Settings > Before </body> tag
Add the following simple inline JS code to disable background scroll when the modal is triggered:

<script>
  const modal = document.querySelector('.modal-class'); // Update with your modal's class
  const body = document.body;

  if (modal && modal.classList.contains('w--open')) {
    body.style.overflow = 'hidden';
  }

  modal?.addEventListener('click', (e) => {
    if (e.target.classList.contains('close-button-class')) { // Update with your close button’s class
      body.style.overflow = '';
    }
  });
</script>

Update .modal-class to your actual modal wrapper class.
Adjust the close button selector accordingly.
This ensures overflow: hidden is set when the modal is open and removed when closed.

4. Integrate with Finsweet Attributes

If you're launching the modal based on a Finsweet cookie or parameter (e.g., fs-cc, fs-param), trigger scroll-lock using a similar condition.
Example:

<script>
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get("show-modal") === "true") {
    document.body.style.overflow = 'hidden';
    // Optionally open the modal here if not already
  }
</script>

This ensures scroll is locked even when modals are triggered via URL parameters.

5. Use Webflow Interactions to Assist

If possible, use Webflow Interactions to trigger an overflow: hidden class on <body>’s proxy (e.g., add a custom overflow-hidden-body class), and control it using Finsweet’s @set or interactions.

Summary

To fix the scrolling issue when using modals with Finsweet cookies or URL parameters, manually disable body scroll by setting body.style.overflow = 'hidden' when the modal opens, and revert it when closed. Use custom JS to handle this dynamically, especially for conditions triggered by parameters like ?show-modal=true.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer