javascript - 当放在位置 : fixed element in bootstrap? 时，如何使我的表可滚动

Question

我创建了一段代码，当用户单击链接时，会出现包含数据的表格。表格本身显示为整个页面上的叠加层，其在 CSS 中的描述如下:

.overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/grid.png);
    background: rgba(222, 222, 222, 0.95)
}

它工作得很好，但如果表格有很多行(如我的示例)- 它们不可见并且无法滚动它们。有没有办法使整个覆盖元素可滚动？我想在表格下面放一些额外的按钮，这样滚动整个覆盖元素会很有帮助。谢谢!

http://jsfiddle.net/fyw6kajm/

Answer 1

您需要添加 overflow:scroll; 在 CSS 中。如果您只想在 y 轴上使用 overflow-y:scroll;

.overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/grid.png);
    background: rgba(222, 222, 222, 0.95);
    overflow:scroll;
}

$("#trigger-overlay2").click(function() {
  //	$(this).toggleClass("active");
  $(".overlay-boxify2").toggleClass("open");
});

.overlay-boxify,
.overlay-boxify2 {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open,
.overlay-boxify2.open {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  z-index: 9999;
}
.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/grid.png);
  background: rgba(222, 222, 222, 0.95);
  overflow: scroll;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a id="trigger-overlay2" href="#contact">Trigger!</a>
<div class="overlay2 overlay-boxify2">
  <div class="container">
    <div class="row">

      <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

        <div class="tos-logo-contact">
          <img src="../img/logo.png">
          </a>
        </div>
        <div class="panel-body">
          <div class="dataTable_wrapper">
            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
              <thead>
                <tr>
                  <th>Location</th>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Duration</th>
                  <th>Content</th>
                </tr>
              </thead>
              <tbody>
                <tr class="odd gradeX">
                  <td>Trident</td>
                  <td>Internet Explorer 4.0</td>
                  <td>Win 95+</td>
                  <td class="center">4</td>
                  <td class="center">X</td>
                </tr>
                <tr class="even gradeC">
                  <td>Trident</td>
                  <td>Internet Explorer 5.0</td>
                  <td>Win 95+</td>
                  <td class="center">5</td>
                  <td class="center">C</td>
                </tr>
                <tr class="odd gradeA">
                  <td>Trident</td>
                  <td>Internet Explorer 5.5</td>
                  <td>Win 95+</td>
                  <td class="center">5.5</td>
                  <td class="center">A</td>
                </tr>
                <tr class="even gradeA">
                  <td>Trident</td>
                  <td>Internet Explorer 6</td>
                  <td>Win 98+</td>
                  <td class="center">6</td>
                  <td class="center">A</td>
                </tr>
                <tr class="odd gradeA">
                  <td>Trident</td>
                  <td>Internet Explorer 7</td>
                  <td>Win XP SP2+</td>
                  <td class="center">7</td>
                  <td class="center">A</td>
                </tr>
                <tr class="even gradeA">
                  <td>Trident</td>
                  <td>AOL browser (AOL desktop)</td>
                  <td>Win XP</td>
                  <td class="center">6</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 1.0</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td class="center">1.7</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 1.5</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td class="center">1.8</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 2.0</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td class="center">1.8</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Firefox 3.0</td>
                  <td>Win 2k+ / OSX.3+</td>
                  <td class="center">1.9</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Camino 1.0</td>
                  <td>OSX.2+</td>
                  <td class="center">1.8</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Camino 1.5</td>
                  <td>OSX.3+</td>
                  <td class="center">1.8</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Netscape 7.2</td>
                  <td>Win 95+ / Mac OS 8.6-9.2</td>
                  <td class="center">1.7</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Netscape Browser 8</td>
                  <td>Win 98SE+</td>
                  <td class="center">1.7</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Netscape Navigator 9</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td class="center">1.8</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Mozilla 1.0</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td class="center">1</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Mozilla 1.1</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td class="center">1.1</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Mozilla 1.2</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td class="center">1.2</td>
                  <td class="center">A</td>
                </tr>
                <tr class="gradeA">
                  <td>Gecko</td>
                  <td>Mozilla 1.3</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td class="center">1.3</td>
                  <td class="center">A</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>