So legen Sie die Div-Bildlaufleiste in CSS fest

Mit der Entwicklung von Webseiten und mobilen Anwendungen sind Bildlaufleisten zu einem unverzichtbaren Benutzererlebnis geworden, und die von CSS3 bereitgestellten Einstellungen für den Bildlaufleistenstil ermöglichen es uns, den Bildlaufleistenstil heute flexibler anzupassen Verwenden Sie CSS, um div-Bildlaufleisten festzulegen.

1. Grundeinstellungen

Wir definieren ein Div mit Inhalt in HTML, Sie müssen die Bildlaufleiste verwenden, um es anzuzeigen. Das Folgende ist eine grundlegende HTML-Struktur:

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

Als nächstes legen wir den Grundstil des Div fest. Sie können den folgenden Stil hinzufügen:

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

Durch die Einstellung von overflow: auto auf .wrapper Eigenschaft: Wenn die Bildlaufleiste ausgeblendet ist, wird die Bildlaufleiste angezeigt, wenn die Inhaltsgröße die Div-Größe überschreitet, ohne sich nach außen zu erweitern und andere Elemente abzudecken.

2. Grundlegende Einstellungen der Bildlaufleiste

Als nächstes können wir den Stil der Bildlaufleiste auf folgende Weise weiter anpassen:

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

Code-Parsing: # 🎜🎜#

::-webkit-scrollbar: Alle Bildlaufleistenkomponenten auswählen. Mit diesem Stil können Sie die Gesamtbreite, Höhe und Hintergrundfarbe der Bildlaufleiste festlegen.
1. ::-webkit-scrollbar ：选择所有滚动条部件。该样式可以设置滚动条整体的宽度高度和背景色。
2. ::-webkit-scrollbar-thumb ：选择滑块。该样式可以控制滑块的宽度高度和背景色。
3. ::-webkit-scrollbar-thumb:hover ：选择滑块在hover状态下的样式。
4. ::-webkit-scrollbar-button ：选择滚动条两端的箭头部分。该样式用于控制上下左右箭头的背景色和是否显示。
5. ::-webkit-scrollbar-button:start:decrement 或者 ::-webkit-scrollbar-sub-button ：选择滚动条上箭头(向上滚动)/左箭头(向左滚动)部分，当滚动条是垂直/水平方向时使用。
6. ::-webkit-scrollbar-button:end:increment 或者 ::-webkit-scrollbar-add-button ：选择滚动条下箭头(向下滚动)/右箭头(向右滚动)部分，当滚动条是垂直/水平方向时使用。

三、自定义滚动条

我们可以根据需要，自定义滚动条的样式，下面是一个自定义样式的例子：

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

代码解析：

1. ::-webkit-scrollbar-track ：选择滚动条的 track 部分，是滑块和滚动箭头/滚动区域之间的区域，可以设置 track 的样式，如背景颜色、边框、圆角等，此例子中我们对其进行了圆角设置。
2. ::-webkit-scrollbar-thumb ：选择滑块的样式，此例子中我们对其进行了圆角设置，并设置了滑块的背景颜色以及hover状态下背景颜色。
3. ::-webkit-scrollbar-corner::-webkit-scrollbar-thumb : Wählen Sie den Schieberegler. Dieser Stil steuert die Breite, Höhe und Hintergrundfarbe des Schiebereglers.

::-webkit-scrollbar-thumb:hover: Wählen Sie den Stil des Schiebereglers im Hover-Zustand aus.

::-webkit-scrollbar-button: Wählen Sie die Pfeilteile an beiden Enden der Bildlaufleiste aus. Dieser Stil wird verwendet, um die Hintergrundfarbe und die Anzeige der Aufwärts-, Abwärts-, Links- und Rechtspfeile zu steuern.

::-webkit-scrollbar-button:start:decrement oder ::-webkit-scrollbar-sub-button: Wählen Sie die Bildlaufleiste aus Abschnitt Pfeil (nach oben scrollen)/Linkspfeil (nach links scrollen), wird verwendet, wenn die Bildlaufleiste vertikal/horizontal ist. #🎜🎜##🎜🎜#::-webkit-scrollbar-button:end:increment oder ::-webkit-scrollbar-add-button: Wählen Sie die Bildlaufleiste aus Abschnitt Pfeil (nach unten scrollen)/Rechtspfeil (nach rechts scrollen), wird verwendet, wenn die Bildlaufleiste vertikal/horizontal ist. #🎜🎜##🎜🎜##🎜🎜#3. Benutzerdefinierte Bildlaufleiste #🎜🎜##🎜🎜# Wir können den Stil der Bildlaufleiste an unsere Bedürfnisse anpassen: # 🎜🎜 #rrreee#🎜🎜#Code-Analyse: #🎜🎜##🎜🎜##🎜🎜#::-webkit-scrollbar-track: Wählen Sie den Track-Teil der Bildlaufleiste aus Der Schieberegler und der Bildlaufpfeil / Der Bereich zwischen den Bildlaufbereichen kann den Spurstil festlegen, z. B. Hintergrundfarbe, Rahmen, abgerundete Ecken usw. In diesem Beispiel legen wir die abgerundeten Ecken fest. #🎜🎜##🎜🎜#::-webkit-scrollbar-thumb: Wählen Sie den Stil des Schiebereglers aus und legen Sie die Hintergrundfarbe des Schiebereglers fest die Hintergrundfarbe im Schwebezustand. #🎜🎜##🎜🎜#::-webkit-scrollbar-corner: Legen Sie die Farbe der Ecke der Bildlaufleiste fest. #🎜🎜##🎜🎜##🎜🎜# 4. Zusammenfassung #🎜🎜##🎜🎜#Nachdem wir die Bildlaufleiste oben eingestellt haben, können wir den entsprechenden Stil auswählen, der entsprechend den tatsächlichen Anforderungen eingestellt werden soll, damit wir ein besseres Ergebnis erzielen können Erleben Sie ein interaktives Erlebnis auf Webseiten und mobilen Anwendungen. Gleichzeitig ist zu beachten, dass die oben genannten Beispiele hauptsächlich für einige Webkit-basierte Browser wie Chrome und Safari geeignet sind. Wenn Sie sich an andere Browser anpassen möchten, müssen Sie andere Stile und Attribute verwenden. #🎜🎜#

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