Question

我能够看到滚动条，但无法滚动div中的内容。

滚动条可见，但无法滚动内容我附上了滚动条如何呈现的截图。

screenshot.png

表截图

<div style="height:auto;width:777px;overflow:hidden;margin-left:0px;" id="ios_mdata" class="contentHolder">
    <table class="table table-bordered table-hover table-condensed"  style="margin-left:23px;">
        <thead>
            <tr>
                <th>Version</th>
                <th>App Type</th>
                <th>File Size(MB)</th>
                <th>Release Date</th>
                <th>Minimum OS</th>
                <th>Avg. User Rating</th>
                <th>User Rating Count</th>
                <th>Last Updated</th>
                <th>View in Store</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>5.3</td>
              <td>universal</td>
              <td>12382700.0</td>
              <td>2010-11-05</td>
              <td>7.0</td>
              <td>2</td>
              <td>2</td>
              <td>2015-08-03</td>
              <td>link</td> 
            </tr>
        </tbody>
    </table>
</div>
<style type="text/css">
  .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
  .contentHolder .content { width: 1280px; height: 620px; }
  .table { width: 1200px; }
  .spacer { text-align:center }
  .table-bordered {
    border-collapse: collapse;
  }
</style>
<script type="text/javascript">
    $("#ios_mdata").perfectScrollbar()
</script>

Answer 1

我遇到了类似的问题。这是我发现的工作：

<div class="scroller" style="overflow-y: auto; overflow-x:hidden; position: relative; height: 340px"> <table>...</table> </div>

然后调用Javascript：

$('.scroller').perfectScrollbar();

Answer 2

很难弄清楚你的答案，但这似乎是一个设计问题。开发人员抱怨使用溢出属性经常导致滚动条奇怪地行为。尽量避免使用overflow属性。

Answer 3

这是因为您在桌面上设置了overflow:hidden;。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

删除此样式规则，溢出将恢复为默认值auto，您将恢复工作滚动条。

Answer 4

**Use two tables**
    1. Table for table header
    2. Table for table body
    
This is the best way of creating table with scrollable body having perfect scroll or any other type of custom scroll.

<div>
   <div>
      <p-table>
         <ng-template pTemplate="header">
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>            
            </tr>
         </ng-template>
      </p-table>
   </div>
   <perfect-scrollbar>
      <div style="max-height: 300px;">
         <p-table [value]="tableData">
            <ng-template pTemplate="body" let-tableData>
               <tr>
                  <td>tableData.id</td>
                  <td>tableData.firstName</td>
                  <td>tableData.lastName</td>
               </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns>
               <tr>
                  <td class="text-align-center" colspan="3">
                     <div>Loading data.. Please wait...</div>
                  </td>
               </tr>
            </ng-template>
         </p-table>
      </div>
   </perfect-scrollbar>
</div>

完美的滚动条不适用于桌子

4 个答案: