Wie entferne ich die horizontale Bildlaufleiste in einem Div?

Wenn ich einstelle overflow: scroll, erhalte ich horizontale und vertikale Bildlaufleisten.

Gibt es eine Möglichkeit, die horizontale Bildlaufleiste in einem Div zu entfernen?

overflow-x: hidden;

Vergiss nicht zu schreiben overflow-x: hidden;

Der Code sollte sein:

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

Mit overflow-y: scrollist die vertikale Bildlaufleiste immer verfügbar, auch wenn sie nicht benötigt wird. Wenn Sie möchten, dass die y-Bildlaufleiste nur sichtbar ist, wenn sie benötigt wird, funktioniert dies wie folgt:

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

CSS

overflow-y: scroll;

Sehen Sie es auf jsFiddle .

Beachten Sie , dass die horizontale Bildlaufleiste angezeigt wird, wenn Sie die -yaus der overflow-yEigenschaft entfernen .

Fügen Sie diesen Code Ihrem CSS hinzu. Dadurch wird die horizontale Bildlaufleiste deaktiviert.

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

Keine Schriftrolle (ohne Angabe von x oder y):

.your-class {
   overflow: hidden;
}

Horizontale Schriftrolle entfernen:

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

Vertikale Schriftrolle entfernen:

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

Um die horizontale Bildlaufleiste auszublenden, können Sie einfach die Bildlaufleiste des gewünschten Divs auswählen und auf einstellen display: none;

Beachten Sie, dass dies nur für WebKit-basierte Browser (wie Chrome) funktioniert, da für Mozilla keine solche Option verfügbar ist.

Verwenden Sie zum Auswählen der Bildlaufleiste ::-webkit-scrollbar

Der endgültige Code sieht also folgendermaßen aus:

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

Verwenden Sie den folgenden Code, um die horizontale Bildlaufleiste zu entfernen. Es funktioniert zu 100%.

html, body {
    overflow-x: hidden;
}

Wenn Sie nichts horizontal überlaufen haben, können Sie es auch einfach verwenden

overflow: auto;

und es werden nur Bildlaufleisten angezeigt, wenn dies erforderlich ist.

Siehe Die CSS-Überlaufeigenschaft

Verwenden:

overflow: auto;

Dadurch wird die vertikale Bildlaufleiste angezeigt und nur bei einem vertikalen Überlauf wird sie ausgeblendet.

Wenn Sie sowohl einen x- als auch einen y-Überlauf haben, werden sowohl x- als auch y-Bildlaufleisten angezeigt.

Um die x (horizontale) Bildlaufleiste auszublenden, fügen Sie einfach Folgendes hinzu:

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>

Um das zu verbergen scrollbar, aber das Verhalten beizubehalten.

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

Hierfür gibt es Einschränkungen.

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

Verwenden Sie diesen Codeabschnitt.

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

Ich hatte Probleme, wo ich benutzte

overflow: none;

Aber ich wusste, dass CSS es nicht wirklich mochte und es nicht zu 100% so funktionierte, wie ich es wollte.

Dies ist jedoch eine perfekte Lösung, da keiner meiner Inhalte größer als beabsichtigt sein soll und dies das Problem behoben hat, das ich hatte.

overflow: auto;