search

orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js
https://playground.cookieconsent.orestbida.com/
MIT License
3.68k stars 387 forks source link

[Feat]: Lock scroll when modale is open #667

Open mrleblanc101 opened 3 months ago

mrleblanc101 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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.