代码之家  ›  专栏  ›  技术社区  ›  Apple Orange

如何将垂直滚动设置为主体上的模式弹出窗口

  •  0
  • Apple Orange  · 技术社区  · 8 年前

    我正在尝试滚动到模式弹出窗口。在我打开模态弹出窗口后,如果按f12键检查元素,我想垂直滚动到模态弹出窗口。如果我移动垂直滚动弹出窗口,只移动。。如何在css中实现它? http://jsfiddle.net/sdjf48be/2/

    css:

    /* The Modal (background) */
    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    }
    
    2 回复  |  直到 8 年前
        1
  •  0
  •   Aizaz Imtiaz Awan    8 年前

    打开Modal时不要滚动父组件 这和你想要的情况一样 将垂直滚动设置为机身上的模式弹出窗口 .

    所以有一个名为onAfterOpen的回调。可以安装回调来禁用所需的元素。

    或者在CSS中,类似于:

    .ReactModal__Body--open {
      overflow-y: hidden;
    }
    

    这将防止莫代尔打开时车身上溢出y。

    希望对你有帮助。

        2
  •  0
  •   Sukhbir    8 年前

    改变现状 overflow 从…起 auto 到 scroll

    overflow: auto; /* Enable scroll if needed */
    overflow: scroll; /* Enable scroll if needed */
    
    推荐文章