Question

我使用fcalderan here描述的技术来阻止身体滚动，但允许叠加滚动。

我使用了第一种方法＆＃34;通过更改叠加层的aria-hidden属性来显示和隐藏它并增加其可访问性。＆＃34;

它有效，但有些身体图像出现在叠加层上方（叠加层不能完全正常工作）。无法解决我们的问题所在。能否请你帮忙？

这是codepen。我几乎包含了所有页面，因为我不知道问题在哪里。（同样在codepen上，正文背景仍在滚动，但在本地主机上它正常工作）

要触发弹出窗口，请点击＆＃34; POP-UP TRIGGER BLOCK＆＃34;

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; }

Answer 1

将z-index 属性添加到.overlay div的足够高值，例如：

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

身体图像显示在叠加层之上

1 个答案: