Ausblenden der Bildlaufleiste auf einer HTML-Seite

Question

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

Answer 1

Zusätzlich zur Antwort von Peter:

#element::-webkit-scrollbar {
    display: none;
}

Dies gilt auch für Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Answer 2

Browserübergreifender Ansatz zum Ausblenden der Bildlaufleiste.

Es wurde mit Edge, Chrome, Firefox und Safari getestet.

Blenden Sie die Bildlaufleiste aus, während Sie weiterhin mit dem Mausrad scrollen können!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Answer 3

Wenn Sie möchten, dass der Bildlauf funktioniert, bevor Sie die Bildlaufleisten ausblenden, sollten Sie das Styling sie. Moderne Versionen von OS X und mobilen Betriebssystemen haben Bildlaufleisten, die zwar unpraktisch sind, um sie mit der Maus zu greifen, aber sehr schön und neutral sind.

Zum Ausblenden von Bildlaufleisten, eine Technik von John Kurlak funktioniert gut, außer beim Verlassen Firefox-Nutzer, die keine Touchpads haben, können nicht scrollen, es sei denn, sie eine Maus mit einem Rad haben, was sie wahrscheinlich haben, aber selbst dann können sie normalerweise nur vertikal scrollen.

Die Technik von John besteht aus drei Elementen:

• Ein äußeres Element zur Maskierung der Bildlaufleisten.
• Ein mittleres Element, das die Bildlaufleisten enthält.
• Und ein Inhaltselement, um sowohl die Größe des mittleren Elements festzulegen als auch die Scrollbalken zu haben.

Es muss möglich sein, die Größe des äußeren und des inneren Elements gleich zu setzen was die Verwendung von Prozentsätzen überflüssig macht, aber ich kann mir nichts anderes vorstellen, das nicht mit der richtigen Einstellung funktionieren würde.

Meine größte Sorge ist, ob alle Versionen von Browsern Bildlaufleisten so einstellen, dass sichtbaren überlaufenden Inhalt sichtbar zu machen. Ich habe es in aktuellen Browsern getestet, aber nicht mit älteren Browsern.

Verzeihen Sie meine SASS ;P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Prüfung

OS X ist 10.6.8. Windows ist Windows 7.

• Firefox 32.0 Scrollbalken ausgeblendet. Mit den Pfeiltasten kann man nicht scrollen, auch nicht nach einem Klick zum Fokussieren, aber Mausrad und zwei Finger auf dem Trackpad tun es. OS X und Windows.
• Chrome 37.0 Bildlaufleisten ausgeblendet. Pfeiltasten funktionieren nach Anklicken zum Fokussieren. Mausrad und Trackpad funktionieren. OS X und Windows.
• Internet Explorer 11 Bildlaufleisten ausgeblendet. Pfeiltasten funktionieren nach dem Klicken zum Fokussieren. Mausrad funktioniert. Windows.
• Safari 5.1.10 Bildlaufleisten ausgeblendet. Pfeiltasten funktionieren nach dem Klicken zum Fokussieren. Mausrad und Trackpad funktionieren. OS X.
• Android 4.4.4 und 4.1.2. Scrollbalken ausgeblendet. Scrollen durch Berührung funktioniert. Ausprobiert in Chrome 37.0, Firefox 32.0 und HTMLViewer auf 4.4.4 (was auch immer das ist). In HTMLViewer hat die Seite die Größe des maskierten Inhalts und kann auch gescrollt werden! Scrollen interagiert akzeptabel mit dem Zoomen der Seite.

Answer 4

Kopieren Sie diesen CSS-Code in den Kundencode zum Ausblenden der Bildlaufleiste:

<style>

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

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

Answer 5

Ich wollte nur alle anderen, die diese Frage lesen, darauf hinweisen, dass die Einstellung overflow: hidden (oder overflow-y) auf dem body Element hat bei mir die Bildlaufleisten nicht ausgeblendet.

Ich musste die html Element.