防止身体滚动，但允许覆盖滚动

我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。

我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动，就像一页在一页的顶部)，但覆盖层后面的主体是固定的。

我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏)，但它不阻止div是可滚动的。

如何保持主体/页面从滚动，但保持滚动在全屏容器内?

当前回答

一般来说，如果你想让父对象(在本例中是body)在子对象(在本例中是overlay)滚动时阻止它滚动，那么让子对象成为父对象的兄弟对象，以防止滚动事件冒泡到父对象。在父元素是body的情况下，这需要一个额外的包装元素:

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

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

2013-11-17 09:03:53

其他回答

大多数解决方案都存在无法保留滚动位置的问题，所以我研究了Facebook是如何做到这一点的。除了将底层内容设置为position: fixed之外，他们还动态设置顶部以保留滚动位置:

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

然后，当你再次移除覆盖时，你需要重置滚动位置:

window.scrollTo(0, scrollPosition);

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

2017-07-21 06:38:28

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

html, body {
    overflow: hidden;
}

2014-02-22 18:41:08

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

下面是下面的代码示例(请注意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

2021-09-01 15:29:44

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

例子:

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

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

2017-06-22 13:06:34

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

只需添加以下样式叠加:

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

Codepen演示

目前工作在Chrome, Firefox和IE(caniuse)

欲了解更多详细信息，请查看谷歌开发人员文章。

2018-02-23 18:24:10

防止身体滚动，但允许覆盖滚动

推荐文章

最新文章

标签