Heim > Web-Frontend > CSS-Tutorial > So ändern Sie den Standardstil der Bildlaufleiste mit CSS

So ändern Sie den Standardstil der Bildlaufleiste mit CSS

王林
Freigeben: 2020-03-17 10:58:08
nach vorne
2396 Leute haben es durchsucht

So ändern Sie den Standardstil der Bildlaufleiste mit CSS

Vorwort:

Viele Projekte müssen den Standardstil der Bildlaufleisten ändern und möchten Plug-Ins nicht separat herunterladen und einführen.

Änderungsmethode: (Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

            &::-webkit-scrollbar {
              // 滚动条的背景
              width: 16px;
              background: #191a37;
              height: 14px;
            }

            &::-webkit-scrollbar-track,
            &::-webkit-scrollbar-thumb {
              border-radius: 999px;
              width: 20px;
              border: 5px solid transparent;
            }

            &::-webkit-scrollbar-track {
              box-shadow: 1px 1px 5px #191a37 inset;
            }

            &::-webkit-scrollbar-thumb {
              //滚动条的滑块样式修改
              width: 20px;
              min-height: 20px;
              background-clip: content-box;
              box-shadow: 0 0 0 5px #464f70 inset;
            }

            &::-webkit-scrollbar-corner {
              background: #191a37;
            }
Nach dem Login kopieren

Vereinfachter Code:

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }
Nach dem Login kopieren

Der Vorteil davon ist, dass es nur so sein wird wird angezeigt, wenn die Maus über geänderte Bildlaufleisten bewegt wird.

Den Scroll-Barcode einer bestimmten Achse ausblenden:

overflow-x:hidden;
Nach dem Login kopieren

Verwandte Video-Tutorial-Freigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Standardstil der Bildlaufleiste mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage