[Feat]: Lock scroll when modale is open

[mrleblanc101]

Description

Hi,
Would be nice to have an option to lock the page scroll when the modale is open.
This is a pretty standard behavior for modales.

Proposed solution

No response

Additional details

No response

[osworx]

Description

Hi, Would be nice to have an option to lock the page scroll when the modale is open. This is a pretty standard behavior for modales.

Has it already, just enable it: https://cookieconsent.orestbida.com/reference/configuration-reference.html#disablepageinteraction

[mrleblanc101]

No, this would disable page interaction when the modale is not opened too. Also it would add a dark overlay when the cookie bar is present. I'm specifically talking about blocking the scroll when the preference modale is opened

[orestbida]

@mrleblanc101 you can achieve this with a simple css rule:

html.show--preferences {
    overflow-y: hidden!important;
}

Although I'm not a fan of this approach as the entire layout is shifted due to the scrollbar being hidden; which is the main reason why there is no scroll lock option.

[mrleblanc101]

Most plugin have an option to handle this case, for exemple body-scroll-lock. It add a padding to compensate when the scroll bar is removed.

There is a also standard CSS way to do this, it's called scrollbar-gutter: stable and is currently being implemented, supported by all browsers except Safari for now.

[alxndr-w]

What is the benefit from blocking? @mrleblanc101

[mrleblanc101]

What is the benefit from blocking? @mrleblanc101

@alxndr-w is the standard for a modal

[alxndr-w]

Ok, but what's the benefit for the user? @mrleblanc101

[mrleblanc101]

@alxndr-w Not accidentally scrolling the page when scrolling the modal, also most browser have scroll chaining which mean when you scroll to the end of the modal, the page behind the modal will scroll. This has been a standard web UX behavior for the past 10-15 years.

[wittjeff]

Please see also this discussion of how to make background content inert when a modal dialog is up, which helps to ensure screen reader users don't read through the end of a modal and go back to reading page contents without realizing it. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal