невидимая полоса прокрутки с использованием HTML5

Question

Я хочу, чтобы моя полоса прокрутки была невидимой

чтобы не было видно

но когда я указываю на окно, оно может прокручиваться

и мне нужно, чтобы он хорошо работал на мобильном устройстве, как на планшете, так и на компьютере. вот почему я выбрал 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>