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

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

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

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

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

当前回答

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

初始:body{…溢出:汽车;} 使用JQuery，你可以在“overlay”和“body”之间动态切换。当使用“body”时，使用

body {
   position: static;
   overflow: auto;
}

在“叠加”时使用

body {
   position: sticky;
   overflow: hidden;
}

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

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

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

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

2020-01-03 22:24:17

其他回答

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

html, body {
    overflow: hidden;
}

2014-02-22 18:41:08

我发现这个问题试图解决我在Ipad和Iphone上的页面问题-当我显示固定div为弹出图像时，身体正在滚动。

有些答案很好，但没有一个解决了我的问题。我找到了下面这篇由Christoffer Pettersson撰写的博文。解决方案提出了帮助问题，我与iOS设备，它帮助我的滚动背景问题。

关于iOS Safari的橡皮筋滚动，我了解到了6件事

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

为了禁止用户在“菜单打开”时滚动后台页面，可以通过应用一些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();
    }
};

然后把禁用滚动类放到页面div上:

<div class="page disable-scrolling">

2016-02-09 22:18:12

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

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

2016-09-20 15:37:52

如果你想停止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, height: 100%和overflow: auto。在你的覆盖层中，你可以根据你的需要启用或禁用滚动。

希望这能有所帮助!

2019-01-30 15:30:25