防止正文滚动但允许叠加滚动

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(因此overflow属性返回其初始值)

码

Codepen示例

(它通过更改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 (vanilla-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);

});

最后,这是另一个示例,其中叠加打开,transition应用于opacity属性的CSS具有淡入效果.还padding-right应用a以避免在滚动条消失时对基础文本进行重排.

Codepen示例(淡入淡出)

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

Answer 2

如果要防止在ios上过度滚动,可以添加固定到.noscroll类的位置

body.noscroll{
    position:fixed;
    overflow:hidden;
}

Answer 3

不要使用overflow: hidden;上body.它会自动将所有内容滚动到顶部.也不需要JavaScript.利用overflow: auto;.此解决方案甚至适用于移动Safari:

HTML结构

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

造型

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

观看演示在这里和源代码在这里.

更新:

对于想要键盘空格键,页面向上/向下工作的人:你需要专注于叠加,例如,点击它,或者在这部分div响应键盘之前手动JS聚焦它.与覆盖"关闭"时相同,因为它只是将覆盖移动到侧面.否则浏览器,这些只是两个正常的divs,它不知道为什么它应该专注于它们中的任何一个.

Answer 4

大多数解决方案都存在不保留滚动位置的问题,所以我看看Facebook是如何做到这一点的.除了设置底层内容之外,position: fixed它们还动态设置顶部以保留滚动位置:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

然后,当您再次移除叠加层时,需要重置滚动位置:

window.scrollTo(0, scrollPosition);

我创建了一个示例来演示此解决方案

let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}

function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>

  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  
  <button class="toggle">Overlay</button>

Answer 5

值得注意的是,有时在body标签中添加"overflow:hidden"并不能完成这项工作.在这些情况下,您还必须将属性添加到html标记中.

html, body {
    overflow: hidden;
}

Answer 6

overscroll-behavior css属性允许在到达内容的顶部/底部时覆盖浏览器的默认溢出滚动行为.

只需将以下样式添加到叠加层:

.overlay {
   overscroll-behavior: contain;
   ...
}

Codepen演示

目前适用于Chrome,Firefox和IE(caniuse)

有关详细信息,请查看Google开发者文章.

Answer 7

如果有人正在寻找React 函数组件的解决方案，您可以将其放入模态组件中：

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

Answer 8

一般来说,如果您希望父项(在这种情况下是正文)在子项(在这种情况下为叠加层)滚动时阻止它滚动,则使子项成为父项的兄弟,以防止滚动事件冒泡到父母.如果父项是正文,则需要额外的包装元素:

<div id="content">
</div>
<div id="overlay">
</div>

请参阅使用浏览器的主滚动条滚动特定DIV内容以查看其工作情况.

Answer 9

选择的答案是正确的,但有一些限制:

• 用手指超级"甩"仍然会<body>在后台滚动
• 通过点击<input>模态中的打开虚拟键盘将指示所有将来的滚动<body>

我没有解决第一个问题,但想要了解第二个问题.令人困惑的是,Bootstrap曾经记录过键盘问题,但他们声称它已经修复,引用http://output.jsbin.com/cacido/quiet作为修复的一个例子.

实际上,这个例子在我的测试中适用于iOS.但是,将其升级到最新的Bootstrap(v4)会破坏它.

为了弄清楚它们之间的区别,我减少了一个测试用例,不再依赖于Bootstrap,http://codepen.io/WestonThayer/pen/bgZxBG.

决定因素是奇怪的.避免键盘问题似乎要求在包含模态的根上background-color 没有设置,并且模态的内容必须嵌套在另一个可以设置的内容中.<div><div>background-color

要测试它,请取消注释Codepen示例中的以下行:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Answer 10

您想要阻止的行为称为滚动链接。要禁用它，请设置

overscroll-behavior: contain;

在 CSS 中的叠加层上。

Answer 11

您可以使用一些“新”css 和 JQuery 轻松完成此操作。

最初：body {... overflow:auto;} 使用 JQuery，您可以在“overlay”和“body”之间动态切换。在“身体”上时，使用

body {
   position: static;
   overflow: auto;
}

在“覆盖”使用时

body {
   position: sticky;
   overflow: hidden;
}

开关的 JQuery('body'->'overlay')：

$("body").css({"position": "sticky", "overflow": "hidden"});

用于开关的 JQuery('overlay'->'body')：

$("body").css({"position": "static", "overflow": "auto"});