cookieconsent icon indicating copy to clipboard operation
cookieconsent copied to clipboard

Published 20 hours ago • verified publisher icon orestbida

[Feat]: Lock scroll when modale is open

Open mrleblanc101 opened this issue 10 months ago • 9 comments

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

mrleblanc101 avatar Mar 26 '24 19:03 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.

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

osworx avatar Mar 27 '24 03:03 osworx

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

mrleblanc101 avatar Mar 27 '24 09:03 mrleblanc101

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

orestbida avatar Apr 01 '24 19:04 orestbida

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.

mrleblanc101 avatar Apr 01 '24 20:04 mrleblanc101

What is the benefit from blocking? @mrleblanc101

alxndr-w avatar Aug 13 '24 07:08 alxndr-w

What is the benefit from blocking? @mrleblanc101

@alxndr-w is the standard for a modal

mrleblanc101 avatar Aug 13 '24 12:08 mrleblanc101

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

alxndr-w avatar Aug 13 '24 13:08 alxndr-w

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

mrleblanc101 avatar Aug 13 '24 13:08 mrleblanc101

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

wittjeff avatar Sep 19 '24 11:09 wittjeff