CSS Scrollbar Generator
Gestalten Sie Scrollbars intuitiv mit einer Echtzeit-Vorschau.
Generieren Sie automatisch WebKit- und Firefox-kompatiblen CSS-Code.
Vorschau
Die Vorschau wird hier angezeigt. Scrollen Sie nach unten, um das Design zu sehen. Dies ist ein Blindtext, um einen scrollbaren Bereich zu erzeugen. Passen Sie Breite, Farben und Randradius an das Design Ihrer Website an.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Anpassung
Generierter CSS-Code
Das könnte dir auch gefallen
Über den CSS Scrollbar Generator
Der CSS Scrollbar Generator ist ein kostenloses Online-Tool, mit dem Sie das Design der Scrollbars Ihrer Website anpassen und sofort den erforderlichen CSS-Code erstellen können.
Bedienen Sie einfach die Schieberegler und Farbauswahlen, um die Stile von Thumb und Track wie Farben, Breite und Randradius anzupassen und gleichzeitig Echtzeit-Vorschauen zu sehen.
Der generierte Code ist nicht nur mit WebKit-Browsern wie Chrome, Safari und Edge kompatibel, sondern unterstützt auch Firefox über scrollbar-color und scrollbar-width. Alle Verarbeitungen erfolgen in Ihrem Browser, wodurch die Nutzung sicher, schnell und ohne Installation oder Registrierung kostenlos ist.
Wie man den Generator benutzt
Größe und Form entscheiden
Verwenden Sie die Schieberegler im Bedienfeld, um die Breite und den Randradius Ihrer Scrollbar einzustellen. Der Vorschaubereich spiegelt Ihre Anpassungen sofort wider, also passen Sie sie an das Design Ihrer Website an.
Farben anpassen
Verwenden Sie die Farbauswahl, um die Farbe für Thumb, Track und Thumb-Hover auszuwählen. Wählen Sie Farben, die mit dem Thema oder den Akzentfarben Ihrer Website harmonieren.
Kopieren und implementieren
Wenn Sie mit der Vorschau zufrieden sind, überprüfen Sie den automatisch generierten CSS-Code am unteren Bildschirmrand und klicken Sie auf die Schaltfläche "CSS kopieren". Fügen Sie ihn in das Stylesheet Ihrer Website ein, um die Implementierung abzuschließen.
CSS Scrollbar Glossar
- WebKit-Präfix (::-webkit-scrollbar)
- Ein nicht standardisiertes CSS-Pseudoelement, das zum Anpassen von Scrollbars in Browsern verwendet wird, die von den WebKit/Blink-Engines angetrieben werden, wie Chrome, Safari und Edge. Es ermöglicht hochgradig anpassbare Designs.
- Scrollbar Track
- Der Hintergrund oder die Rille der Scrollbar. Sie können ihn mit ::-webkit-scrollbar-track stylen, um seine Hintergrundfarbe oder innere Schatten festzulegen.
- Scrollbar Thumb
- Der ziehbare Teil der Scrollbar, der die Scrollposition anzeigt. Er wird mit ::-webkit-scrollbar-thumb gestylt, um Farbe und Randradius anzupassen.
- scrollbar-color und scrollbar-width
- W3C-Standard-CSS-Eigenschaften, die von Browsern wie Firefox unterstützt werden, die keine WebKit-Präfixe unterstützen. Sie ermöglichen es Ihnen, Thumb- und Track-Farben festzulegen und die Breite (auto, thin oder none) zu definieren.
- Cross-Browser-Kompatibilität
- Die Fähigkeit einer Website, konsistent über verschiedene Webbrowser (Chrome, Firefox, Safari usw.) hinweg zu funktionieren und angezeigt zu werden. Unser Tool generiert Code, der nahtlos über alle wichtigen Browser hinweg funktioniert.
Häufig gestellte Fragen
- F.Funktioniert das generierte CSS auf Smartphones?
- Ja, es funktioniert auf WebKit-basierten mobilen Browsern wie Safari unter iOS und Chrome unter Android. Je nach OS-Spezifikationen wird die Scrollbar jedoch möglicherweise nur während des Scrollens angezeigt.
- F.Kann ich die Scrollbar nur auf ein bestimmtes Element (wie ein div) anwenden?
- Ja, das können Sie. Ersetzen Sie einfach .custom-scrollbar im generierten Code durch die Klasse oder ID Ihres spezifischen Elements (z. B. .my-container oder #scroll-box).
- F.Ist es mit dem Firefox-Browser kompatibel?
- Ja, das ist es. Dieses Tool generiert automatisch nicht nur WebKit-Pseudoelemente, sondern auch W3C-Standard-Eigenschaften scrollbar-color und scrollbar-width für Firefox.
- F.Werden meine Daten bei der Nutzung dieses Tools auf einem Server gespeichert?
- Nein, werden sie nicht. Dieses Tool läuft vollständig in Ihrem Browser mittels JavaScript, sodass Ihre Einstellungen und der generierte Code niemals an externe Server gesendet werden.
- F.Wie kann ich die Scrollbar komplett ausblenden?
- Um die Scrollbar auszublenden und die Scrollfunktion beizubehalten, können Sie ::-webkit-scrollbar { display: none; } für WebKit und scrollbar-width: none; für Firefox verwenden.
Anwendungsfälle
Markenfarben vereinheitlichen
Ändern Sie die Farbe der Scrollbars auf Ihrer Unternehmens- oder Portfolio-Website, damit sie zu Ihren Markenfarben passen und die allgemeine Designkonsistenz verbessern.
Benutzerdefinierte UI-Web-Apps
Perfekt für Web-Apps wie Chat-Anwendungen oder Dashboards, bei denen Sie interne Scrollbereiche (divs) haben und die Standard-OS-Scrollbar für einen schlankeren Look ausblenden möchten.
Dark Mode-Unterstützung
Passen Sie Ihre Scrollbar an dunkelgraue oder ähnliche Farbtöne an, um sich nahtlos in den Dunkelmodus Ihrer Website einzufügen und Blendung und Augenbelastung für Benutzer zu reduzieren.
Minimalistisches Design verfolgen
Stellen Sie die Scrollbar-Breite so ein, dass sie extrem dünn ist, wodurch sie unauffällig wird und der Fokus der Benutzer auf Ihrem eigentlichen Inhalt bleibt.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.