Wie entferne ich die horizontale Bildlaufleiste in einem Div?

128

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

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

Ravi
quelle

Antworten:

208
overflow-x: hidden;

Basarat
quelle
Vielen Dank, dass Sie viel Zeit gespart haben. Kann jemand dies als akzeptierte Antwort markieren?
Nagarajan SR
5
Es ist eine schlechte Lösung. Denn in diesem Fall verstecken Sie einfach den horizontalen Bildlauf im Container. Wenn dieser Container jedoch zu breit ist, passt Ihr Inhalt nicht in Ihren Container.
Alex Filatov
38

Vergiss nicht zu schreiben overflow-x: hidden;

Der Code sollte sein:

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

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;}
Pascha
quelle
19

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 .

Alex
quelle
13

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

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

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;
}
Mise
quelle
OP muss ohne Bildlaufleiste
gescrollt werden
8

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

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

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

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

rspilhaus
quelle
2

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>

Aero
quelle
0

Verwenden Sie diesen Codeabschnitt.

.card::-webkit-scrollbar {
  display: none;
}
Kamalesh Biswas
quelle
-3

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