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.

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!