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

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!