Bir div'deki yatay kaydırma çubuğunu nasıl kaldırırım?

Ayarladığımda overflow: scrollyatay ve dikey kaydırma çubukları alıyorum.

Bir div'deki yatay kaydırma çubuğunu kaldırmanın bir yolu var mı?

overflow-x: hidden;

Yazmayı unutma overflow-x: hidden;

Kod şu şekilde olmalıdır:

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

İle overflow-y: scrolldikey kaydırma çubuğu, ihtiyaç olmasa bile her zaman orada olacaktır. Y-kaydırma çubuğunun yalnızca gerektiğinde görünür olmasını istiyorsanız, bunun işe yaradığını buldum:

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

CSS

overflow-y: scroll;

JsFiddle'da görün .

Eğer kaldırırsanız Bildirimi -ygelen overflow-ymülkiyet, yatay kaydırma çubuğu gösterilir.

Bu kodu CSS'nize ekleyin. Yatay kaydırma çubuğunu devre dışı bırakacaktır.

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

Kaydırma yok (x veya y belirtmeden):

.your-class {
   overflow: hidden;
}

Yatay kaydırmayı kaldır:

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

Dikey kaydırmayı kaldırın:

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

Yatay kaydırma çubuğunu gizlemek için, gerekli div'in kaydırma çubuğunu seçip şu şekilde ayarlayabiliriz: display: none;

Unutulmaması gereken bir nokta, Mozilla için böyle bir seçenek olmadığından, bunun yalnızca WebKit tabanlı tarayıcılarda (Chrome gibi) çalışacağıdır.

Kaydırma çubuğunu seçmek için kullanın ::-webkit-scrollbar

Yani son kod şöyle olacak:

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

Yatay kaydırma çubuğunu kaldırmak için aşağıdaki kodu kullanın. % 100 çalışıyor.

html, body {
    overflow-x: hidden;
}

Yatay olarak taşan bir şeyiniz yoksa, sadece kullanabilirsiniz

overflow: auto;

ve yalnızca gerektiğinde kaydırma çubuklarını gösterecektir.

CSS Taşma Özelliğine Bakın

kullanın:

overflow: auto;

Bu, dikey kaydırma çubuğunu gösterecek ve yalnızca dikey bir taşma varsa, aksi takdirde gizlenecektir.

Hem x hem de y taşmanız varsa, hem x hem de y kaydırma çubukları gösterilecektir.

X (yatay) kaydırma çubuğunu gizlemek için, mevcut olsa bile eklemeniz yeterlidir:

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>

Saklamak scrollbar, ama davranışı korumak.

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

Bunun sınırlamaları var.

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

Bu kod parçasını kullanın ..

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

Kullandığım yerde sorunlar yaşıyordum

overflow: none;

Ancak CSS'nin gerçekten hoşlanmadığını ve istediğim gibi% 100 çalışmadığını biliyordum.

Ancak, içeriğimin hiçbirinin amaçlanandan daha büyük olmaması gerektiği için bu mükemmel bir çözüm ve bu, sahip olduğum sorunu çözdü.

overflow: auto;