Heim >Web-Frontend >CSS-Tutorial >Wie zeige ich die vertikale Bildlaufleiste in WebKit-Browsern immer an?

Wie zeige ich die vertikale Bildlaufleiste in WebKit-Browsern immer an?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-06 19:06:16822Durchsuche

How to Always Display the Vertical Scrollbar in WebKit Browsers?

Vertikale Bildlaufleiste immer anzeigen

Bei bestimmten Webdesigns ist es wichtig sicherzustellen, dass Benutzer scrollbare Inhalte in einem div-Element leicht erkennen können. Trotz der Einstellung overflow-y: scroll ist die vertikale Bildlaufleiste möglicherweise nicht sichtbar, wenn sie auf bestimmten Betriebssystemen wie macOS nicht aktiv verwendet wird.

Lösung:

Um zu erzwingen, dass die vertikale Bildlaufleiste immer angezeigt wird, verwenden Sie die folgenden CSS-Eigenschaften:

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

Diese Stile gelten für WebKit-basierte Browser wie Safari und Chrome auf macOS. Indem Sie das Erscheinungsbild der Bildlaufleiste anpassen, können Sie sie hervorheben und auf das Vorhandensein von scrollbaren Inhalten hinweisen, auch wenn diese nicht aktiv verwendet werden.

Das obige ist der detaillierte Inhalt vonWie zeige ich die vertikale Bildlaufleiste in WebKit-Browsern immer an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn