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

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

理论

查看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" >OPEN LAYER</button>

（叠加和关闭按钮）

<section  aria-hidden="true">  <div>    <h2>Hello, I'm the overlayer</h2>    ...       <button type="button" >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() {          var overlayOpen = this.className === 'open-overlay';          overlay.setAttribute('aria-hidden', !overlayOpen);     body.classList.toggle('noscroll', overlayOpen);          overlay.scrollTop = 0;  }, false);});

---

最后，这是另一个示例，其中，通过将CSS

transition

应用于

opacity

属性，叠加层以淡入效果打开。

padding-right

当滚动条消失时，还应用a来避免基础文本上的重排。

的CSS

.noscroll { overflow: hidden; }@media (min-device-width: 1025px) {        .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; }