Anzeigen von Bildlaufleisten in mobilen Browsern

Diese Frage konzentriert sich auf das Problem versteckter Bildlaufleisten in mobilen Browsern bei Verwendung von „overflow:auto“ oder „ overflow:visible“ für scrollbare Inhalte. Während die Bildlaufleiste in Desktop-Browsern sichtbar ist, verschwindet sie auf mobilen Geräten, sofern nicht aktiv gescrollt wird.

Um dieses Problem zu beheben, können Sie Ihr CSS so ändern, dass es den folgenden Code enthält, der spezifisch für die Webkit-Browser-Engine ist:

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

Dieser Code definiert das Erscheinungsbild der Bildlaufleiste, einschließlich ihrer Breite, Höhe, Daumenfarbe und Spurfarbe. Durch Anpassen dieser Eigenschaften können Sie die Bildlaufleiste auf Mobilgeräten immer sichtbar machen, sogar vor dem Scrollen.