强制显示在桌子上的垂直滚动条

Question

我正试图在我的桌子上强制显示垂直滚动条。这是我的代码：

<div style="height:95%;overflow:auto;">
   <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%; overflow:auto;">
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
   </table>
</div>

请注意，我已经尝试了overflow: scroll，overflow-y: scroll（带!important）以及其他一些解决方案，但它不起作用。我在Mac OS上使用Chrome。

Answer 1

某些版本的OSX会在不需要时隐藏滚动条。 他们可能希望使网页更加流畅。 尝试在CSS文件中包含这个：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

JSFiddle

Source

Answer 2

您使用了高度％。如果不是某种东西，高度可以用％表示。所以在这里你必须使用像素高度或最大高度来工作。或者，如果你想让它成为百分比，只需将其设为绝对值，并使其父div相对，以便它将相对于其父值占据高度百分比。

<div style="max-height:100px;overflow-y:scroll ">
   <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%;">
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
   </table>
</div>

百分比高度的作用如下： -

  <div style="height:200px;position:relative">
   <div style="height:50%;position:absolute;overflow-y:scroll ">
       <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%;">
          <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
       </table>
    </div>
  </div>