使用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>