Die Haupt-Bildlaufleiste immer sichtbar machen

Welches CSS ist erforderlich, damit die vertikale Bildlaufleiste des Browsers sichtbar bleibt, wenn ein Benutzer eine Webseite besucht (wenn die Seite nicht über genügend Inhalt verfügt, um die Aktivierung der Bildlaufleiste auszulösen)?

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Dadurch wird die Bildlaufleiste immer sichtbar und nur bei Bedarf aktiv.

Update: Wenn das oben genannte nicht funktioniert, kann dies nur verwendet werden.

html {
    overflow-y:scroll;
}

Stellen Sie sicher, dass der Überlauf auf "Scrollen" und nicht auf "Automatisch" eingestellt ist. Nachdem das gesagt worden ist wurde , wird nach wie vor nur zeigen in OS X Lion, Überlauf auf „Scroll“ verhält sich mehr wie Auto, dass Scrollbalken , wenn verwendet. Wenn also die oben genannten Lösungen nicht funktionieren, ist dies möglicherweise der Grund.

Folgendes müssen Sie beheben:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Sie können es entsprechend formatieren, wenn Ihnen die Standardeinstellung nicht gefällt.

Die Dinge haben sich in den letzten Jahren geändert. Die obigen Antworten sind nicht mehr in allen Fällen gültig. Apple drückt überall verschwindende Bildlaufleisten . Safari, Chrome und sogar Firefox auf MacOs (und iOs) zeigen nur Bildlaufleisten an, wenn tatsächlich gescrollt wird - ich weiß nichts über das aktuelle Windows / IE. Es gibt jedoch nicht standardmäßige Möglichkeiten, Bildlaufleisten in Webkit zu formatieren (IE hat dies vor langer Zeit gelöscht).

html {
    overflow-y: scroll;
}

Ist es das was du willst?

Leider scheint Opera 9.64 diese CSS-Deklaration zu ignorieren, wenn sie auf HTMLoder angewendet wird BODY, obwohl sie für andere Elemente auf Blockebene wie funktioniert DIV.

html {height: 101%;}

Ich verwende diese browserübergreifende Lösung (Hinweis: Ich verwende immer die DOCTYPE-Deklaration in der ersten Zeile. Ich weiß nicht, ob sie im Quirksmode funktioniert, habe sie nie getestet ).

Dies zeigt immer eine aktive vertikale Bildlaufleiste an auf jeder Seite Bildlaufleiste angezeigt. Die vertikale Bildlaufleiste kann nur mit wenigen Pixeln gescrollt werden.

Wenn der Seiteninhalt kürzer ist als der sichtbare Bereich des Browsers (Ansichtsfenster) ist, wird die vertikale Bildlaufleiste weiterhin aktiv angezeigt und kann nur mit wenigen Pixeln gescrollt werden.

Wenn Sie von der CSS-Validierung besessen sind (ich bin nur von der HTML-Validierung besessen), wenn Sie diese Lösung verwenden, wird Ihr CSS-Code auch für W3C validiert, da Sie keine nicht standardmäßigen CSS-Attribute wie verwenden -moz-scrollbars-vertical

body { height:101%; } "schneidet" größere Seiten.

Stattdessen benutze ich:

body { min-height:101%; }

Ich konnte dies zum Laufen bringen, indem ich es dem Body-Tag hinzufügte. War schöner für mich, weil ich nichts im HTML-Element habe.

body {
    overflow-y: scroll;
}

Ein alternativer Ansatz besteht darin, die Breite des HTML-Elements auf 100 VW festzulegen. Bei vielen, wenn nicht den meisten Browsern wird dadurch die Auswirkung von Bildlaufleisten auf die Breite negiert.

html { width: 100vw; }

Das Einstellen der Höhe auf 101% ist meine Lösung für das Problem. Ihre Seiten blättern nicht mehr, wenn Sie zwischen solchen wechseln, die die Höhe des Ansichtsfensters überschreiten, und solchen, die dies nicht tun.

body { 
    min-height: 101vh; 
} 

funktioniert am besten für mich

Ich mache das:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Dann muss ich nicht auf die hässlich ausgegraute Bildlaufleiste schauen, wenn sie nicht benötigt wird.