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

Question

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

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

我尝试仅使用 CSS 来创建它（即在整个页面顶部覆盖 div 并使用 overflow: hidden 覆盖正文），但这并不能阻止 div可滚动。

如何保持正文/页面不滚动，但在全屏容器内继续滚动？

Answer 1

理论

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

覆盖（即时创建或已在页面内创建并通过display: block 可见，没有区别）具有position : fixed 和overflow-y: scroll，以及top、left、@987654332 @ 和bottom 属性设置为0：这种样式使覆盖层填充整个视口。

覆盖层内的div 只是在position: static 中，然后您看到的垂直滚动条与该元素相关。因此，内容是可滚动的，但覆盖仍然是固定的。

当您关闭缩放时，您会隐藏叠加层（通过 display: none），然后您也可以通过 javascript 将其完全删除（或者只是其中的内容，由您决定如何注入它）。

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

---

代码

Codepen Example

（它通过更改覆盖层的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);

});

---

最后，这是另一个示例，其中覆盖以淡入效果打开，CSS transition 应用于opacity 属性。当滚动条消失时，还应用了padding-right 以避免底层文本重排。

Codepen Example (fade)

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 上过度滚动，您可以将 position fixed 添加到您的 .noscroll 类中

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

Answer 3

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

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

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

Codepen demo

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

更多详情请查看google developers article。

Answer 4

不要在body 上使用overflow: hidden;。它会自动将所有内容滚动到顶部。也不需要 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;
}

查看演示here和源代码here。

更新：

对于想要键盘空格键，向上/向下翻页工作的人：您需要专注于覆盖，例如单击它，或者手动JS聚焦它，然后div的这部分将响应键盘.与“关闭”叠加层时相同，因为它只是将叠加层移到一边。否则对于浏览器来说，这只是两个普通的divs，它不知道为什么要关注其中任何一个。

Answer 5

大多数解决方案都有不保留滚动位置的问题，所以我看看 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 */
/* Suggestion to put: overflow-y: hidden; 
Disabled scrolling still makes a mess with its width. Hiding it does the trick. */
}

.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 6

值得注意的是，有时将“overflow:hidden”添加到正文标记并不能完成这项工作。在这些情况下，您还必须将属性添加到 html 标记中。

html, body {
    overflow: hidden;
}

Answer 7

您可以使用一些“新的”css 和 JQuery 轻松做到这一点。

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

body {
   position: static;
   overflow: auto;
}

在“覆盖”时使用

body {
   position: sticky;
   overflow: hidden;
}

JQuery 的 switch('body'->'overlay'):

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

JQuery 的 switch('overlay'->'body'):

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

Answer 8

一般来说，如果您希望父级（本例中为主体）在子级（本例中为叠加层）滚动时阻止其滚动，则将子级设为父级的兄弟以防止滚动事件冒泡到父级。如果父对象是主体，则需要一个额外的包装元素：

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

请参阅Scroll particular DIV contents with browser's main scrollbar 以了解其工作原理。

Answer 9

选择的答案是正确的，但有一些限制：

• 用手指超硬“甩动”仍会在后台滚动<body>
• 通过在模态中点击<input> 打开虚拟键盘会将所有未来滚动到<body>

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

确实，该示例在我的测试中在 iOS 上运行良好。但是，将其升级到最新的 Bootstrap (v4) 会破坏它。

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

决定因素很奇怪。避免键盘问题似乎要求background-color 不设置在包含模态的根@9​​87654327@上，并且模态的内容必须嵌套在另一个<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

对于触摸设备，请尝试在叠加层的包装中添加一个 1px 宽、101vh min-height 的透明 div。然后将-webkit-overflow-scrolling:touch; overflow-y: auto; 添加到包装器中。这会诱使移动 Safari 认为叠加层是可滚动的，从而拦截来自 body 的触摸事件。

这是一个示例页面。在移动 safari 上打开：http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

Answer 12

我发现这个问题试图解决我在 Ipad 和 Iphone 上的页面遇到的问题 - 当我将固定 div 显示为带有图像的弹出窗口时，正文正在滚动。

有些答案很好，但是没有一个能解决我的问题。我发现了 Christoffer Pettersson 的以下博客文章。那里提出的解决方案帮助了我在 iOS 设备上遇到的问题，它帮助了我的滚动背景问题。

Six things I learnt about iOS Safari's rubber band scrolling

正如建议的那样，我将博客文章的要点包括在内，以防链接过时。

“为了禁止用户在“菜单打开”时滚动背景页面，可以通过应用一些 JavaScript 和 CSS 类来控制哪些元素应该被允许滚动。

基于此Stackoverflow 答案，您可以控制禁用滚动的元素不应 当触发 touchmove 事件时执行它们的默认滚动动作。”

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

然后把disable-scrolling类放到页面div上：

<div class="page disable-scrolling">

Answer 13

如果打算在移动/触摸设备上禁用，那么最直接的方法是使用touch-action: none;。

例子：

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

（该示例在 Stack Overflow 的上下文中不起作用。您需要在独立页面中重新创建它。）

如果您想禁用 #app 容器的滚动，只需添加 touch-action: none;。

Answer 14

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

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

Answer 15

body 标签的简单内联样式：

<body style="position: sticky; overflow: hidden;">

Answer 16

我想添加到以前的答案，因为我试图这样做，但一旦我将正文切换到位置：固定，一些布局就中断了。为了避免这种情况，我还必须将身体的高度设置为 100%：

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

Answer 17

使用以下 HTML：

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

然后JavaScript拦截并停止滚动：

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

然后让事情恢复正常：

$(".page").off("touchmove");

Answer 18

试试这个

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

Answer 19

一个React 功能组件的解决方案是使用useEffect hook。

下面是代码示例（注意useEffect定义）：

import {useEffect, useRef} from "react";

export default function PopoverMenu({className, handleClose, children}) {
  const selfRef = useRef(undefined);

  useEffect(() => {
    const isPopoverOpenned = selfRef.current?.style.display !== "none";
    const focusedElement = document?.activeElement;
    const scrollPosition = {x: window.scrollX, y: window.scrollY};
    if (isPopoverOpenned) {
      preventDocBodyScrolling();
    } else {
      restoreDocBodyScrolling();
    }

    function preventDocBodyScrolling() {
      const width = document.body.clientWidth;
      const hasVerticalScrollBar = (window.innerWidth > document.documentElement.clientWidth);
      document.body.style.overflowX = "hidden";
      document.body.style.overflowY = hasVerticalScrollBar ? "scroll" : "";
      document.body.style.width = `${width}px`;
      document.body.style.position = "fixed";

    }

    function restoreDocBodyScrolling() {
      document.body.style.overflowX = "";
      document.body.style.overflowY = "";
      document.body.style.width = "";
      document.body.style.position = "";
      focusedElement?.focus();
      window.scrollTo(scrollPosition.x, scrollPosition.y);
    }


    return () => {
      restoreDocBodyScrolling(); // cleanup on unmount
    };
  }, []);

  return (
    <>
      <div
        className="backdrop"
        onClick={() => handleClose && handleClose()}
      />
      <div
        className={`pop-over-menu${className ? (` ${className}`) : ""}`}
        ref={selfRef}
      >
        <button
          className="pop-over-menu--close-button" type="button"
          onClick={() => handleClose && handleClose()}
        >
          X
        </button>
        {children}
      </div>
    </>
  );
}

最初发布在另一个相关的 Stackoverflow 问题上：https://stackoverflow.com/a/69016517/14131330

Answer 20

就我而言，这些解决方案都没有在 iPhone (iOS 11.0) 上运行。

对我所有设备都有效的唯一有效修复是这个 - ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-position

Answer 21

如果你想停止 body/html 滚动添加如下

CSS

    html, body {
        height: 100%;
    }

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

HTML

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

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

基本上不用 JS 也可以。

主要思想是添加 html/body 高度：100% 和溢出：自动。 在您的叠加层内，您可以根据您的要求启用/禁用滚动。

希望这会有所帮助！

Answer 22

使用下面的代码来禁用和启用滚动条。

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();