Stop Scroll when modal is open

is there any what to add this by css class?

11 Replies

b1mind•2y ago

I use this

.noScroll {
    position: fixed;
    overflow: hidden;
    -webkit-overscroll-behavior: none;
    overscroll-behavior: none;
}

.noScroll {
    position: fixed;
    overflow: hidden;
    -webkit-overscroll-behavior: none;
    overscroll-behavior: none;
}

on the body and remove it with <noscript> or JS

Aldrin•2y ago

this scrolls the page to the top

b1mind•2y ago

maybe take off the pos: fixed? if your body is not expanding could be that

Aldrin•2y ago

tried removing pos: fixed, its still scrolls to top

b1mind•2y ago

I'd have to see more, I don't have that issue O wait it does xD but I have my body at 100% so it don't grow >.>;; @Aldrin you can try it without overscroll-behavior? I will have to test on a body that grows. That is there because iOS. I had only tested the once but for my use case it works.

Aldrin•2y ago

Ok let me try

Kevin Powell•2y ago

Because it's me, I do have to suggest

html:has(modal[open]) { overflow: hidden; }

html:has(modal[open]) { overflow: hidden; }

But yeah, browser support and all that 😛

b1mind•2y ago

body scrolls though This issue honestly is a pain in the arse, I need to make a clear codepen I can come back to. Mobile .... why do mobile browsers have to be so difficult

Aldrin•2y ago

thanks, it worked 👍

b1mind•2y ago

make sure you check iOS, you might need a fallback for it to put the webkit overscroll behavior on those devices

Aldrin•2y ago

ok 👍

Gaming

Programming

Stop Scroll when modal is open