防止正文滚动，但允许覆盖滚动

Question

我一直在寻找一种“灯箱”类型的解决方案，它允许这样做，但还没有找到（请提出建议，如果您知道的话）。

我尝试重新创建的行为就像单击图片时在Pinterest上看到的一样。叠加层是可滚动的（
因为整个叠加层像页面顶部的页面一样向上移动 ），但是叠加层 后面 的主体是固定的。

我试图仅使用CSS（ _即使用div覆盖整个页面和正文的覆盖层）overflow: hidden_来创建它，但这并不能阻止div其滚动。

如何防止正文/页面滚动但在全屏容器中继续滚动？

Answer 1

理论

查看pinterest网站的当前实现（将来可能会更改），当您打开叠加层时，会将一个noscroll类应用于该body元素并overflow:hidden进行设置，因此该类body不再可滚动。

叠加（上即时或已经在页面内，并通过可见创建display: block，它使没有区别）有position : fixed和overflow-y: scroll，与top，left，right和bottom属性设置为0：这种风格使得覆盖填充整个视口。

该div覆盖里面，而不是仅仅在position: static然后就看到垂直滚动条是有关该元素。结果，内容是可滚动的，但是覆盖层保持固定。

关闭缩放时，您可以隐藏叠加层（通过display: none），然后也可以通过javascript完全删除叠加层（或仅删除其中的内容，具体取决于注入方式）。

作为最后一步，您还必须将noscroll类删除到body（这样，溢出属性将返回其初始值）

码

（它通过更改aria-hidden叠加层的属性来显示和隐藏它并增加其可访问性而起作用）。

标记
（打开按钮）

<button type="button" class="open-overlay">OPEN LAYER</button>

（叠加和关闭按钮）

<section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

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

Javascript （香草JS）

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() {

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

最后，这是另一个示例，其中，通过将CSS transition应用于opacity属性，叠加层以淡入效果打开。padding- right当滚动条消失时，还应用a来避免基础文本上的重排。

的CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

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

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}