Bagaimana cara menghapus scrollbar horizontal di div?

Ketika saya mengatur overflow: scroll, saya mendapatkan scrollbar horisontal dan vertikal.

Apakah ada cara untuk menghapus scrollbar horizontal di div?

overflow-x: hidden;

Jangan lupa menulis overflow-x: hidden;

Kode tersebut harus:

overflow-y: scroll;
overflow-x: hidden;

Dengan overflow-y: scroll, bilah gulir vertikal akan selalu ada meskipun tidak diperlukan. Jika Anda ingin y-scrollbar hanya terlihat ketika dibutuhkan, saya menemukan ini berfungsi:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

CSS

overflow-y: scroll;

Lihat di jsFiddle .

Perhatikan jika Anda menghapus -ydari overflow-yproperti, bilah gulir horizontal ditampilkan.

Tambahkan kode ini ke CSS Anda. Ini akan menonaktifkan scrollbar horizontal.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Tidak ada gulir (tanpa menentukan x atau y):

.your-class {
   overflow: hidden;
}

Hapus gulir horizontal:

.your-class {
   overflow-x: hidden;
}

Hapus gulir vertikal:

.your-class {
   overflow-y: hidden;
}

Untuk menyembunyikan scrollbar horizontal, kita cukup memilih scrollbar dari div yang diperlukan dan mengaturnya display: none;

Satu hal yang perlu diperhatikan adalah ini hanya akan berfungsi untuk browser berbasis WebKit (seperti Chrome) karena tidak ada opsi seperti itu tersedia untuk Mozilla.

Untuk memilih bilah gulir, gunakan ::-webkit-scrollbar

Jadi kode akhir akan seperti ini:

div::-webkit-scrollbar {
  display: none;
}

Untuk menghapus bilah gulir horizontal, gunakan kode berikut. 100% berfungsi.

html, body {
    overflow-x: hidden;
}

Jika Anda tidak memiliki sesuatu yang melimpah secara horizontal, Anda juga bisa menggunakannya

overflow: auto;

dan itu hanya akan menampilkan bilah gulir bila diperlukan.

Lihat Properti Overflow CSS

Menggunakan:

overflow: auto;

Ini akan menampilkan scrollbar vertikal dan hanya jika ada overflow vertikal, jika tidak, itu akan disembunyikan.

Jika Anda memiliki overflow x dan y, maka scrollbar x dan y akan ditampilkan.

Untuk menyembunyikan bilah gulir x (horizontal), meskipun ada, tambahkan saja:

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

Untuk menyembunyikannya scrollbar, tetapi pertahankan perilakunya.

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

Ada batasan untuk ini.

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Gunakan potongan kode ini ..

.card::-webkit-scrollbar {
  display: none;
}

Saya mengalami masalah di mana saya menggunakan

overflow: none;

Tapi saya tahu CSS tidak begitu menyukainya dan tidak berfungsi 100% seperti yang saya inginkan.

Namun, ini adalah solusi sempurna karena tidak ada konten saya yang seharusnya lebih besar dari yang dimaksudkan dan ini telah memperbaiki masalah yang saya miliki.

overflow: auto;