使用html5的不可见滚动条

Question

我希望我的滚动条不可见

以至于看不到

但是当我指向方框时它可以滚动

，我需要使其在平板电脑和PC上的移动设备上都能正常运行。这就是为什么我选择了html5

感谢您的帮助

.scrollable {
  height: 100px;
  overflow-y: scroll;
}

<div class="scrollable">
  <table>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
    <tr>
      <td>row 3</td>
    </tr>
    <tr>
      <td>row 4</td>
    </tr>
    <tr>
      <td>row 5</td>
    </tr>
    <tr>
      <td>row 6</td>
    </tr>
    <tr>
      <td>row 7</td>
    </tr>
    <tr>
      <td>row 8</td>
    </tr>
  </table>
</div>

Answer 1

只需在您的CSS文件中添加以下行，该滚动条将变得不可见。

// -webkit- (Chrome, Safari, newer versions of Opera):

.element::-webkit-scrollbar { width: 0 !important }

// -moz- (Firefox):

.element { overflow: -moz-scrollbars-none; }

// -ms- (Internet Explorer +10):

.element { -ms-overflow-style: none; }

Answer 2

以下内容如何：

.scrollable {
  height: 100px;
  overflow-y: hidden;
}

.scrollable:hover {
  overflow-y: scroll;
}

<div class="scrollable">
  <table>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
    <tr>
      <td>row 3</td>
    </tr>
    <tr>
      <td>row 4</td>
    </tr>
    <tr>
      <td>row 5</td>
    </tr>
    <tr>
      <td>row 6</td>
    </tr>
    <tr>
      <td>row 7</td>
    </tr>
    <tr>
      <td>row 8</td>
    </tr>
  </table>
</div>