it-swarm.com.de

Wie entferne ich die horizontale Bildlaufleiste in einem div?

Wenn ich overflow:scroll setze, bekomme ich horizontale und vertikale Bildlaufleisten. 

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

92
Ravi
overflow-x: hidden;

152
basarat

Vergiss nicht, overflow-x:hidden; zu schreiben

code sollte sein

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

27

Bei overflow-y:scroll ist die vertikale Bildlaufleiste immer vorhanden, auch wenn sie nicht benötigt wird. Wenn Sie möchten, dass die y-Bildlaufleiste nur sichtbar ist, wenn sie benötigt wird, habe ich festgestellt, dass dies funktioniert:

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

CSS

overflow-y: scroll;

Siehe auf jsFiddle .

Wenn Sie den -y aus der overflow-y-Eigenschaft entfernen, wird die horizontale Bildlaufleiste angezeigt.

14
alex

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

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

Kein Bildlauf: // ohne Angabe von x oder y

.your-class {
   overflow: hidden; 
}

Horizontale Bildlauf entfernen:

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

Vertikale Bildlauf entfernen:

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

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

overflow:auto;

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

http://css-tricks.com/the-css-overflow-property/

4
rspilhaus
overflow: auto;

Dadurch wird die vertikale Bildlaufleiste angezeigt. Nur wenn ein vertikaler Überlauf vorhanden ist, wird sie sonst ausgeblendet. 

Wenn Sie sowohl einen x- als auch einen y-Überlauf haben, werden sowohl die x- als auch die y-Bildlaufleiste 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>

1
aero

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

Eine Sache zu beachten ist, dass dies nur für Webkit-basierte Browser (wie Chrome) funktioniert, da für Mozilla keine solche Option verfügbar ist.

Um die Bildlaufleiste auszuwählen, verwenden Sie ::-webkit-scrollbar

Der endgültige Code wird also so aussehen:

div::-webkit-scrollbar{
  display: none;
}
0
Shubham Jain

Verwenden Sie diesen Code, um die horizontale Bildlaufleiste zu entfernen. es funktioniert 100%

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