Wie kann sichergestellt werden, dass Bildlaufleisten in mobilen Browsern immer sichtbar sind?

So zeigen Sie eine Bildlaufleiste in mobilen Browsern an

Trotz CSS-Eigenschaften wie „overflow:auto“ und „overflow:visible“ werden Bildlaufleisten angezeigt Desktop-Browser, mobile Browser verbergen sie oft, bis das Scrollen beginnt. In diesem Artikel geht es darum, wie Sie Bildlaufleisten auf mobilen Geräten konsistent sichtbar machen, auch ohne ineffektive jQuery-Bibliotheken zu verwenden.

Berücksichtigen Sie den folgenden HTML- und CSS-Code:

<div>

#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

Um die Bildlaufleiste zu erstellen Damit sie auf Mobilgeräten immer sichtbar ist, fügen Sie das folgende CSS hinzu:

::-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 für die WebKit-Browser-Engine spezifische Code ändert das Erscheinungsbild der Bildlaufleiste und stellt so deren Sichtbarkeit auf Mobilgeräten sicher.

Das obige ist der detaillierte Inhalt vonWie kann sichergestellt werden, dass Bildlaufleisten in mobilen Browsern immer sichtbar sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!