Wie erzwinge ich, dass eine vertikale Bildlaufleiste immer in CSS angezeigt wird?

So zeigen Sie immer eine vertikale Bildlaufleiste in CSS an

In bestimmten Szenarien möchten Sie möglicherweise sicherstellen, dass eine vertikale Bildlaufleiste immer sichtbar ist , auch wenn der Inhalt eines Divs nicht über den sichtbaren Bereich hinausgeht. Standardmäßig blenden Browser Bildlaufleisten aus, bis die Maus über ein Element bewegt wird.

Um zu erzwingen, dass eine Bildlaufleiste immer angezeigt wird, fügen Sie das folgende CSS hinzu:

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

Die erste Zeile entfernt den Standard-Browserstil und die zweite Zeile definiert den benutzerdefinierten Stil für den Bildlaufleisten-Daumen.

Zum Beispiel:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

Das obige ist der detaillierte Inhalt vonWie erzwinge ich, dass eine vertikale Bildlaufleiste immer in CSS angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!