0

I've used technique described by fcalderan here to prevent body scrolling, but allow overlay scrolling.

I've used first method which "works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility."

It works, however some of the body images are appearing on top of overlay(overlay is not working completely). Can't figure our what's the problem. Could you please help?

Here is codepen. I've included practically all page cause I don't know here the problem is. (Also on codepen the body background is still scrolling, but on local host it's working correctly)

To trigger pop-up click "POP-UP TRIGGER BLOCK"

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }
VXp
  • 10,307
  • 6
  • 25
  • 40
get9
  • 103
  • 10

1 Answers1

1

Add the z-index property with some high enough value to the .overlay div, e.g.:

.overlay {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
}
VXp
  • 10,307
  • 6
  • 25
  • 40