Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird

醉折花枝作酒筹
Freigeben: 2023-01-06 11:16:01
Original
14446 Leute haben es durchsucht

In CSS können Sie den Pseudoklassenselektor „::-webkit-scrollbar“ verwenden, um die Bildlaufleiste auszuwählen, und dann den Stil „display:none“ verwenden, um die Bildlaufleiste nicht anzuzeigen. Das spezifische Syntaxformat lautet „; ::-webkit-scrollbar {display:none;}".

So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

::-webkit-scrollbar Der CSS-Pseudoklassenselektor beeinflusst den Stil der Bildlaufleiste eines Elements. Wir können die Anzeigeeigenschaft des ::-webkit-scrollbar-Selektors auf „none“ setzen, um die Bildlaufleiste auszublenden.

So stellen Sie ein, dass die Bildlaufleiste nicht angezeigt wird:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div style=" width:200px;   height: 200px;  overflow-y: scroll;">
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
           cmcc</br>
       </div>
   </body>
</html>
Nach dem Login kopieren

Rendering:

Vor dem Festlegen des CSS-Effekts:

So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird

Nach dem Hinzufügen des CSS-Stils:

Code

<style>
     ::-webkit-scrollbar {display:none}
</style>
Nach dem Login kopieren

Verwenden Sie CSS, um die Bildlaufleiste nicht anzuzeigen um den Effekt anzuzeigen:

So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird

CSS-Bildlaufleistenauswahl:

  • ::-webkit-scrollbar – die gesamte Bildlaufleiste

  • ::-webkit-scrollbar-button – die Schaltfläche auf der Bildlaufleiste (nach oben und unten). Pfeile)

  • : :-webkit-scrollbar-thumb – Bildlaufleiste auf Scroll-Schieberegler

  • ::-webkit-scrollbar-track – Bildlaufleistenspur

  • ::-webkit-scrollbar-track-piece – Bildlaufleiste verschiebt sich nicht Der Spurteil des Blocks

  • ::-webkit-scrollbar-corner – Der Teil, der zusammentrifft, wenn sowohl vertikale als auch horizontale Bildlaufleisten vorhanden sind

  • ::-webkit-resizer – Der Teil des Eckteils bestimmter Elemente Stil (Beispiel: ziehbare Schaltfläche des Textbereichs)

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage