Detailliertes Beispiel für den benutzerdefinierten CSS3-Bildlaufleistenstil

Im vorherigen Artikel haben wir Ihnen die CSS-Einstellung des Div-Bildlaufleistenstils vorgestellt. Wir alle wissen, dass eine Bildlaufleiste im Container angezeigt wird Manchmal kann die Bildlaufleiste unsere ästhetischen Anforderungen nicht erfüllen, sodass wir die Bildlaufleiste über die CSS-Pseudoklasse anpassen können.

Zuerst müssen wir die Bildlaufleisten verstehen. Die Bildlaufleiste besteht vom Aussehen her aus zwei Teilen: 1. Dem Schiebeteil, wir nennen ihn den Schieberegler. 2. Der Spur der Bildlaufleiste, also der Spur des Schiebereglers ist dunkler als die Farbe der Spur.

Der CSS-Stil der Bildlaufleiste besteht hauptsächlich aus drei Teilen:

1. ::-webkit-scrollbar Definiert den Gesamtstil der Bildlaufleiste; ::-webkit -scrollbar-thumb Slider-Teil

3. ::-webkit-scrollbar-thumb Track-Teil; ein Beispiel (

overflow-x

:Same as auto)

HTML-Code: CSS-Code:

Der Effekt ist wie folgt:

<p class="test test-1">
		<p class="scrollbar"></p>
</p>

    .test{
    	width: 50px;
    	height: 200px;
    	overflow: auto;
    	float: left;
    	margin: 5px;
    	border: none;
    }
    .scrollbar{
    	width: 30px;
    	height: 300px;
    	margin: 0 auto;

    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

Wenn Sie die Breite der Bildlaufleiste ändern möchten: Ändern Sie sie einfach in ::-webkit-scrollbar; wenn Sie die abgerundeten Ecken von ändern möchten Gehen Sie im Schieberegler der Bildlaufleiste zu ::-webkit-scrollbar. Ändern Sie ihn in -thumb. Wenn Sie die abgerundeten Ecken des Tracks ändern möchten, ändern Sie ihn in ::-webkit-scrollbar-track , kann der Schieberegler der Bildlaufleiste nicht nur mit Farbe, sondern auch mit Bildern wie folgt gefüllt werden:

CSS-Code:

HTML-Code:

Der Effekt ist wie folgt:

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

	<p class="test test-5">
		<p class="scrollbar"></p>
	</p>

Zusammenfassung:

Durch das Lernen aus den obigen Beispielen habe ich Ich glaube, dass Freunde ihre eigenen Bildlaufleisten erstellen können, und hoffen, dass alle Bildlaufleisten gleich sind, sodass keine Notwendigkeit besteht, etwas wie Klasse, ID, Beschriftungsname usw. hinzuzufügen. vor dem Pseudoelement.

Verwandte Empfehlungen:

Beispiel für die CSS-Einstellung des Div-Bildlaufleistenstils

So lösen Sie das Problem mit dem Stil der Bildlaufleiste

Beispiele für das Design der div-Bildlaufleiste in HTML

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den benutzerdefinierten CSS3-Bildlaufleistenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!