Bagaimana cara menghapus scrollbar horizontal di div?

128

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

Apakah ada cara untuk menghapus scrollbar horizontal di div?

Ravi
sumber

Jawaban:

208
overflow-x: hidden;

basarat
sumber
Terima kasih telah menghemat banyak waktu. Dapatkah seseorang menandai ini sebagai jawaban yang diterima, tolong.
Nagarajan SR
5
itu solusi yang buruk. Karena dalam hal ini Anda hanya menyembunyikan gulir horizontal dalam wadah. Tetapi jika wadah ini terlalu lebar konten Anda tidak akan muat di wadah Anda.
Alex Filatov
38

Jangan lupa menulis overflow-x: hidden;

Kode tersebut harus:

overflow-y: scroll;
overflow-x: hidden;
Ajit Bhandari
sumber
21

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;}
Pasha
sumber
19

CSS

overflow-y: scroll;

Lihat di jsFiddle .

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

alex
sumber
13

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

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

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;
}
Mise
sumber
OP perlu bergulir tanpa scrollbar
T04435
8

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;
}
Shubham Jain
sumber
8

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

html, body {
    overflow-x: hidden;
}
Harshit Bansal
sumber
5

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

rspilhaus
sumber
2

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>

aero
sumber
0

Gunakan potongan kode ini ..

.card::-webkit-scrollbar {
  display: none;
}
kamalesh biswas
sumber
-3

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;
Ash Darko
sumber