当放置在某个位置上时，如何使表格可滚动：引导程序中的固定元素？

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)
}

它可以正常工作，但是如果表中有很多行（如我的示例），则这些行不可见并且无法滚动。 有没有一种方法可以使整个叠加元素可滚动？ 我想在表格下放置一些额外的按钮，因此滚动整个overlay元素会很有帮助。 谢谢！

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>