Ausblenden der Bildlaufleiste auf einer HTML-Seite

Question

Kann man mit CSS die Bildlaufleiste ausblenden? Wie würden Sie dies tun?

Answer 1

Das funktioniert bei mir mit einfachen CSS-Eigenschaften:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Für ältere Versionen von Firefox, verwenden Sie: overflow: -moz-scrollbars-none;

Answer 2

Ich glaube, ich habe eine Lösung für euch gefunden, falls ihr noch daran interessiert seid. Dies ist meine erste Woche, aber es hat bei mir funktioniert...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Answer 3

Wenn Sie nach einer Lösung suchen, um eine Bildlaufleiste für mobile Geräte auszublenden, folgen Sie Petrus' Antwort !

Hier ist ein jsfiddle die die folgende Lösung verwendet, um eine horizontale Bildlaufleiste auszublenden.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Sie wurde auf einem Samsung-Tablet mit Android 4.0.4 (Ice Cream Sandwich, sowohl im nativen Browser als auch in Chrome) und auf einem iPad mit iOS 6 (sowohl in Safari als auch in Chrome) getestet.

Answer 4

Wie die anderen schon sagten, verwenden Sie CSS overflow .

Wenn Sie jedoch möchten, dass der Benutzer den Inhalt weiterblättern kann (ohne dass die Bildlaufleiste sichtbar ist), müssen Sie JavaScript verwenden.

Siehe meine Antwort hier für eine Lösung: Ausblenden der Bildlaufleiste bei gleichzeitiger Möglichkeit, mit der Maus/Tastatur zu blättern

Answer 5

使用方法 der CSS overflow Eigenschaft :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Hier sind einige weitere Beispiele:

• Überlauf-x, Überlauf-y-Tests
• Die CSS-Überlaufeigenschaft