Reiner CSS-Stil: sehr nützlicher Bildlaufleistenstil

Wenn wir beim Slicing in einigen DIVs lokal Bildlaufleisten hinzufügen möchten, ist das sehr hässlich.

Wenn wir ungeduldig sind, verwenden wir normalerweise das JQuery-Plug-In, um dies zu erreichen. Und oft haben wir immer noch Kompatibilitätsprobleme. Kurz gesagt, die Benutzererfahrung ist nicht so gut wie bei der direkten Verwendung von overflow:scroll.

Heute möchte ich einen sehr einfach zu verwendenden reinen CSS-Bildlaufleistenstil empfehlen. Sie müssen nur den folgenden Code zu Ihrer CSS-Datei hinzufügen und können overflow:scroll an verschiedenen Positionen nach Belieben verwenden.

Der Anzeigeeffekt ist auch sehr gut.

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

Und Sie können Farben auch direkt über CSS definieren.

Das obige ist der detaillierte Inhalt vonReiner CSS-Stil: sehr nützlicher Bildlaufleistenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!