Wie kann ich eine vertikale Bildlaufleiste in CSS dauerhaft sichtbar machen?

Anfrage zur dauerhaften Sichtbarkeit der vertikalen Bildlaufleiste mit CSS-Überlauf: Scrollen

Beim Implementieren von CSS-Überlauf-y: Scrollen Sie, um den Inhalt innerhalb eines vorgegebenen Bereichs einzuschränken Höhe kann es schwierig sein, sicherzustellen, dass Benutzer das Vorhandensein zusätzlicher Inhalte bemerken. Unter macOS, Chrome und Safari verbergen Sie die vertikale Bildlaufleiste, bis der Benutzer aktiv scrollt oder mit der Maus darüber fährt. Dies wirft die Frage auf, ob Benutzer sofort erkennen, dass ein Div mehr Inhalt enthält.

Eine Lösung, um eine konstante Anzeige der Bildlaufleiste zu erzwingen

Eine Lösung für dieses Problem besteht in der Einbindung von folgendes CSS:

::-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);
}

Dieses CSS überschreibt den Standardstil von Bildlaufleisten in macOS-Browsern. Indem Sie -webkit-appearance auf none setzen, wird der Standardstil des Browsers deaktiviert. Die width-Eigenschaft gibt die gewünschte Breite der Bildlaufleiste an und die border-radius-Eigenschaft fügt dem Scroll-Daumen eine abgerundete Form hinzu. Die Eigenschaften „Hintergrundfarbe“ und „Boxschatten“ sorgen für ein benutzerdefiniertes Erscheinungsbild und verbessern die Sichtbarkeit der Bildlaufleiste.

Durch die Integration dieses CSS bleibt die vertikale Bildlaufleiste auch dann sichtbar, wenn sich der Mauszeiger nicht über dem Div befindet. Dadurch wird sichergestellt, dass Benutzer deutlich erkennen können, dass zusätzliche Inhalte verfügbar sind. Diese Lösung geht auf die Herausforderung ein, die durch das Standardverhalten von macOS entsteht, und verbessert das Benutzererlebnis, indem sie einen permanenten Hinweis auf scrollbare Inhalte bereitstellt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine vertikale Bildlaufleiste in CSS dauerhaft sichtbar machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!