So verbergen Sie die Bildlaufleiste in CSS

Methode: 1. Verwenden Sie die Anweisung „overflow-y:scroll“ 2. Verwenden Sie die Anweisung „overflow-x:hidden;overflow-y:auto;“ unten: -15px;"-Anweisung.

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

Methode 1

Der Code lautet wie folgt:

html { overflow-y: scroll; }

Prinzip: Erzwingen Sie die Anzeige der vertikalen Bildlaufleiste des IE, während die horizontale Bildlaufleiste ignoriert wird.

Vorteile: Dieses Problem wird vollständig gelöst, sodass Sie dies tun können Pflegen Sie den vollständigen XHTML-Dokumenttyp.

Nachteile: Vertikale Bildlaufleisten werden auch dann angezeigt, wenn die Seite keine vertikalen Bildlaufleisten erfordert.

Methode 2: (Empfohlen)

Der Code lautet wie folgt:

html { overflow-x: hidden; overflow-y: auto; }

Prinzip: Horizontales Scrollen ausblenden, vertikales Scrollen passt sich dem Inhalt an

Vorteile: Dieses Problem wird visuell gelöst, wenn es nicht erforderlich ist. Die vertikale Bildlaufleiste muss nicht angezeigt werden

Nachteile: Sie verbirgt nur die horizontale Bildlaufleiste. Wenn die Seite wirklich eine horizontale Bildlaufleiste benötigt, ist der Inhalt außerhalb des Bildschirms nicht sichtbar, da der Benutzer nicht horizontal scrollen kann.

Methode 3Der Code lautet wie folgt:

body { margin-right: -15px; margin-bottom: -15px; }

Prinzip: Dadurch wird ein negativer Wert in der horizontalen und vertikalen Richtung des Randes hinzugefügt. Nachdem IE diesen genauen Wert hinzugefügt hat, entsteht die Illusion, dass ein Scrollen erforderlich ist Balken werden entfernt.

Vorteile: Dieses Problem wird visuell gelöst, je nach Inhalt.

Nachteile: Aufgrund des „künstlich erzeugten“ 15-Pixel-Rands kann der gefüllte Bildschirmbereich nicht genutzt werden. --------------------------------

Legen Sie den Stil fest

Im Original-HTML können wir ihn so definieren Bildlaufleiste der gesamten Seite

Der Code lautet wie folgt:

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

Aber derselbe Code funktioniert nicht, wenn wir ihn unter xhtml anwenden. Ich glaube, viele gute Freunde sind auf das gleiche Problem gestoßen. Wie kann ich ihn verwenden? xhtml Was ist mit der Anwendung von Bildlaufleistenstilen? Schauen Sie sich den folgenden Code an

Der Code lautet wie folgt:

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

Der einzige Unterschied zwischen diesem Code und dem vorherigen Absatz besteht darin, dass in den durch CSS definierten Elementen eines der Körper und das andere ein HTML ist. Lassen Sie es uns noch einmal testen und den

„Körper“ der HTML-Seite in „HTML“ ändern, um es zu testen und festzustellen, dass der Effekt immer noch erzielt werden kann. Warum also?

Wörtlich hat xhtml ein x mehr als html, also ist dieses x eigentlich XML. Warum müssen wir XML hinzufügen? Tatsächlich besteht der grundlegendste Grund darin, HTML strukturierter und standardisierter zu gestalten (weil HTML wirklich schlecht ist).

Was wir in HTML definieren, ist Body. Dies funktioniert nicht, aber in XHTML funktioniert es nicht.

Ich schaue mir das Bild an und es ist offensichtlich, dass das Body-Tag selbst nicht das Stammelement ist. Nur HTML ist das Stammelement, und die Bildlaufleiste der Seite gehört ebenfalls zum Stammelement. Aus diesem Grund hat unsere Definition von body keine Auswirkung, da es sich bei dem, was wir definieren, nur um ein untergeordnetes Element handelt. Ok, wir kennen das Prinzip, machen wir ein Experiment. Wenn wir die Definition „body“ oder „xhtml“ durch „*“ ersetzen, lautet der

Code wie folgt:

*{ 
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

übergibt sowohl HTML als auch XHTML, weil * ist jede Definition auf der Seite Natürlich beinhaltet das Tag auch das „html“-Tag.

(ps: Tatsächlich ist der Unterschied zwischen HTML und XHTML nicht so sehr der Unterschied zwischen dem Vorhandensein und Fehlen des XHTML 1.0-Übergangsdokumenttyps. Wenn Sie jedoch den XHTML 1.0-Übergangsdokumenttyp von der Seite entfernen, wird die Seite dies nicht tun haben einen Dokumenttyp. Der Standard-Anzeigemodus ist HTML4.01, aber Sie müssen den XHTML 1.0-Übergangsdokumenttyp in HTML 4.01 ändern. Das Definieren des Hauptteils auf derselben Seite hat keine Auswirkung, obwohl der Standard dieser Seite HTML ist 4.01)

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!