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>
<pre class="brush:php;toolbar:false">#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.