使用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 {&nbsp; height: 100px;&nbsp; overflow-y: hidden;}.scrollable:hover {&nbsp; overflow-y: scroll;}<div class="scrollable">&nbsp; <table>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 1</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 2</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 3</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 4</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 5</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 6</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 7</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>row 8</td>&nbsp; &nbsp; </tr>&nbsp; </table></div>