CSS verbirgt die Bildlaufleiste, kann aber scrollen

Mit der kontinuierlichen Weiterentwicklung von Webanwendungen wird Webdesign immer interaktiver. Als häufiges interaktives Element werden häufig Bildlaufleisten verwendet. Aber manchmal möchten wir vielleicht die Bildlaufleiste ausblenden, damit die Seite einfacher und schöner aussieht. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS die Bildlaufleiste ausblenden und trotzdem scrollen können.

1. Verwenden Sie das Überlaufattribut von CSS

Wir können das Überlaufattribut von CSS verwenden, um den Überlaufinhalt des Elements zu steuern. Das Überlaufattribut verfügt über drei Parameterwerte: sichtbar (Standardwert), ausgeblendet, scrollen und automatisch.

1. versteckt

Dieser Attributwert wird verwendet, um ein Element und seine Unterelemente auszublenden. Bei zu langen Inhalten werden diese sofort abgeschnitten und außerhalb des Bereichs ausgeblendet.

2. scroll

Wir können den scroll-Attributwert verwenden, um eine Bildlaufleiste in einem Element zu erstellen. Wenn der Inhalt zu lang ist, um auf einmal auf den Bildschirm zu passen, können wir mit Bildlaufleisten durch den gesamten Inhalt scrollen.

Durch die Verwendung des Bildlaufs kann der Effekt „Bildlaufleiste ausblenden, aber dennoch scrollen“ erzielt werden. Wir können im Element eine feste Höhe und Breite festlegen, den Inhalt überlaufen lassen und mit „overflow:scroll“ die Bildlaufleiste anzeigen.

3. auto

Schließlich haben wir einen „auto“-Attributwert. Dieser Attributwert gibt an, dass der Browser bei Bedarf automatisch Bildlaufleisten hinzufügen soll, beispielsweise wenn der Inhalt zu groß ist. Wenn der Inhalt den Container nicht überschreitet, werden keine Bildlaufleisten angezeigt.

2. Blenden Sie die Bildlaufleiste aus

Daher können wir „overflow:hidden“ verwenden, um die Bildlaufleiste auszublenden. Dadurch werden unsere Bildlaufleisten ausgeblendet und das Scrollen deaktiviert.

.Bildlaufleiste ausblenden {
Überlauf: versteckt;
}

In diesem Fall können wir den Inhalt jedoch nicht durch die Bildlaufleiste scrollen. Daher müssen wir eine andere Methode anwenden, um den gewünschten Effekt zu erzielen. Hier ist ein einfaches Beispiel, das „overflow:hidden“ verwendet, um die Bildlaufleiste auszublenden.

3. Es kann immer noch gescrollt werden

Die nächste Frage ist, wie man den Inhalt noch scrollbar macht. Wir können JavaScript verwenden, um dieses Problem zu lösen. Wir müssen den Gerätetyp erkennen, den der Benutzer verwendet, da Bildlaufleisten auf Mobilgeräten sichtbar sind.

Im Folgenden wird eine Methode bereitgestellt, mit der wir das Verhalten der Bildlaufleiste steuern können. Es hängt von der jQuery-Bibliothek ab.

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} else {

$('body').css('overflow-y', 'scroll');

}
});

Dieser Code aktiviert Standards, wenn wir auf der Bildlaufleiste eines PCs oder Android-Geräts surfen. Auf Apple-Geräten werden ähnliche Bildlaufleisten verwendet, jedoch native iOS-Bildlaufleisten emuliert. Wir können durch den Inhalt scrollen, indem wir die Bildlaufleiste oder Seite berühren.

Natürlich ist das nicht der einzige Weg. Ähnliche Effekte können wir auch über CSS erzielen, ohne auf JavaScript angewiesen zu sein. Wir können die Höhe und Breite des Elements festlegen, die Bildlaufleiste mit „overflow:hidden“ ausblenden und dann mit „-webkit-overflow-scrolling:touch“ Trägheitsscrollen aktivieren.

Trägheitsscrollen aktivieren {
Höhe: 100 %;
Überlauf: versteckt;
4. Fazit

Wie um Bildlaufleisten mit CSS auszublenden, aber trotzdem scrollen zu können. Wir haben zwei Möglichkeiten beschrieben, diesen Effekt mithilfe des Overflow-Attributs und JavaScript zu erzielen. Jede Methode hat ihre eigenen Vor- und Nachteile. Die endgültige Entscheidung hängt von Ihren Bedürfnissen ab. Wenn Sie eine flexiblere und portablere Lösung benötigen, verwenden Sie JavaScript. Wenn Sie einfach nur die Bildlaufleisten ausblenden und trotzdem scrollen möchten, verwenden Sie CSS.

Das obige ist der detaillierte Inhalt vonCSS verbirgt die Bildlaufleiste, kann aber scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!