Question

我有一个带可滚动内容的div。我想为它添加一个覆盖内容的颜色掩码，但不会随内容滚动。 http://jsfiddle.net/6e9t1wt3/1/

  *{box-sizing:border-box;}
  #main{position:relative; border: 1px solid blue; height: 400px; overflow: auto;}
  #main:before {
      content:'';
      width:100%;
      height:100%;background:red;position:fixed;
  }

<div id="stuff">


  <div id="main">
      <div class="loading-mask">Loading...</div>
      <table class="data">
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr> 
      </table>
  </div>

在我的小提琴中，你会看到面具但是当我在我的div中向下滚动它会滚动。我需要使用固定或绝对的头寸吗？谢谢你的建议！

Answer 1

在包装器中包装该可滚动区域的内容，position也包含absolutely。使用overflow:auto使该包装器可滚动。小提琴：http://jsfiddle.net/ilpo/6e9t1wt3/2/

HTML：

<div id="main">
    <div class="loading-mask">Loading...</div>
    <div class="content">
        <!-- content here -->
    </div>
</div>

CSS：

#main {
    position:relative;
    border: 1px solid blue;
    height: 400px;
    overflow: hidden;
}
.loading-mask {
    padding: 10px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: rgba(3, 3, 3, 0.8);
    width:100%;
}
.content {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:auto;
}

掩盖div与叠加，防止蒙版滚动

1 个答案: