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

Jim猴子2020-03-19

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

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

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

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

Near路易蛋蛋2020/03/19 10:24:16

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

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();

斯丁老丝GO2020/03/19 10:24:16

就我而言，这些解决方案都无法在iPhone（iOS 11.0）上实现。

ios-10-safari-prevent-scrolling-a-fixed-overlay-and-maintain-scroll-position之后，唯一可在我所有设备上使用的有效解决方案

卡卡西千羽2020/03/19 10:24:16

使用以下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");

老丝樱梅2020/03/19 10:24:16

如果要停止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％，溢出：自动。在叠加层内部，您可以根据需要启用/禁用滚动。

希望这可以帮助！

飞云Stafan2020/03/19 10:24:16

我想添加到以前的答案中，因为我试图这样做，并且当我将主体切换到position：fixed时，某些布局中断了。为了避免这种情况，我还必须将身体的高度设置为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");
}

十三古一2020/03/19 10:24:16

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

overscroll-behavior: contain;

在CSS中的叠加层上。

猴子Harry路易2020/03/19 10:24:16

对于触摸设备，请尝试101vh在覆盖层的包装中添加1px宽，最小高度的透明div。然后添加-webkit-overflow-scrolling:touch; overflow-y: auto;到包装器中。这会诱使移动浏览器认为覆盖层是可滚动的，从而拦截了来自人体的触摸事件。

这是示例页面。在移动浏览器中打开：http：//www.originalfunction.com/overlay.html

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

Near卡卡西2020/03/19 10:24:16

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

用手指超硬的“手指”仍会<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; */
}

JimJim2020/03/19 10:24:16

一般而言，如果希望父级（在这种情况下为主体）在子级（在此情况下为叠加层）滚动时阻止其滚动，则使子级成为父级的同级，以防止滚动事件冒泡。父母。如果父级是主体，则需要附加的包装元素：

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

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

小宇宙Itachi2020/03/19 10:24:16

如果要防止在iOS上过度滚动，可以将固定位置添加到.noscroll类

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

小宇宙猪猪2020/03/19 10:24:16

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

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

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

Codepen演示

目前可在Chrome，Firefox和IE（caniuse）中使用

有关更多详细信息，请参阅Google开发人员文章。

蛋蛋小小2020/03/19 10:24:16

值得注意的是，有时在body标签上添加“ overflow：hidden”并不能完成任务。在这种情况下，您还必须将属性添加到html标记中。

html, body {
    overflow: hidden;
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer