Przejdź do treści
TextArray1.87.0
100% lokalnie

Generator CSS scrollbara

Generowanie niestandardowych reguł CSS dla ::-webkit-scrollbar i scrollbar-width/scrollbar-color.

Wynik
Powiązane narzędzia
CSS box-shadow generatorNarzędzia dla programistów
Ekstraktory zmiennych kolorów CSSNarzędzia dla programistów
Generator animacji i przejść CSSnoweNarzędzia dla programistów
różnica kluczy i18nNarzędzia dla programistów
Konwerter TOML na JSONNarzędzia dla programistów
SQL do JSONNarzędzia dla programistów
Generator CSS scrollbara
Domyślny pasek przewijania przeglądarki rzadko pasuje do reszty projektu, a jego stylizacja oznacza zapamiętanie dwóch różnych specyfikacji naraz: pseudo-elementy ::-webkit-scrollbar dla WebKit, które używają Chrome, Safari i Edge, oraz standardowe właściwości scrollbar-width/scrollbar-color, które czyta Firefox. To narzędzie generuje oba jednocześnie z kilku opcji, więc kopiujesz jeden blok CSS, a każda główna przeglądarka renderuje pasek przewijania pasujący do strony.
Ustawiasz selektor docelowy – body dla całej strony lub klasę taką jak .sidebar dla jednego przewijanego panelu – następnie wybierasz szerokość scrollbara w pikselach, kolory ścieżki i uchwytu oraz kolor, na który zmienia się uchwyt po najechaniu. Zaokrąglenie uchwytu kontroluje border-radius paska, którym się manipuluje, a obraz wewnętrzny dodaje przezroczystą szczelinę między uchwytem a ścieżką, aby wyglądał jak pływająca pigułka zamiast stałego bloku. Opcja Wariant przełącza się między normalnym scrollbarem przeglądarki, cieńszą wersją "cienki" i "ukryty", który całkowicie ukrywa pasek przewijania za pomocą -ms-overflow-style i scrollbar-width: none, jednocześnie pozostawiając przewijanie własnego elementu bez zmian.
Po włączeniu wariantu dla trybu ciemnego druga kopia reguł jest owijana w bloku @media (prefers-color-scheme: dark), przy czym kolory ścieżki i uchwytu są automatycznie ciemniejsze, aby witryna, która już przełącza motywy, uzyskała pasek przewijania, który się z nią zmienia – żaden oddzielny rachunek nie jest potrzebny. Każda opcja aktualizuje wynik na żywo podczas regulacji, a licznik pod wynikiem raportuje, ile bloków reguł CSS zostało wygenerowanych i dokładną liczbę znaków.
Wszystko działa lokalnie w przeglądarce: żaden selektor, kolor ani CSS nigdy nie opuszcza urządzenia. Skopiuj wynik bezpośrednio do arkusza stylów, pobierz jako plik .txt lub wyślij go do wejścia innego narzędzia, aby dalej go udoskonalać.
Częste pytania
Dlaczego narzędzie generuje reguły scrollbar-width i ::-webkit-scrollbar?
Żadna jedna właściwość CSS nie jest obsługiwana wszędzie. Firefox czyta standardowe właściwości scrollbar-width i scrollbar-color, podczas gdy Chrome, Safari i Edge reagują tylko na starsze pseudo-elementy ::-webkit-scrollbar. Generowanie obu oznacza, że ten sam arkusz stylów działa we wszystkich przeglądarkach.
Czy wariant "ukryty" zatrzymuje przewijanie elementu?
Nie. Ukrywa tylko wizualny pasek przewijania i uchwyt za pomocą scrollbar-width: none i -ms-overflow-style: none. Element nadal przewija się normalnie za pomocą kółka myszy, touchpada lub dotyku – zawartość po prostu nie ma widocznego paska przewijania.
Co dokładnie robi wewnętrzny obraz uchwytu?
Dodaje przezroczysty obraz wokół uchwytu z background-clip: padding-box, który zmniejsza widoczne wypełnienie do wewnątrz od krawędzi ścieżki. Ta szczelina powoduje, że uchwyt wygląda jak zaokrąglona pigułka zamiast paska, który dotyka obu stron scrollbara.
Jak obliczane są kolory dla trybu ciemnego?
Każdy kolor, który ustawisz, jest mieszany w kierunku czerni o stałą kwotę i umieszczany w bloku @media (prefers-color-scheme: dark), dzięki czemu witryna, która już automatycznie przełącza motywy, uzyskuje proporcjonalnie ciemniejszą ścieżkę i uchwyt bez ręcznego wybierania drugiego zestawu kolorów.
Czy mój CSS lub kolory, które wybieram, są przesyłane gdziekolwiek?
Nie. CSS scrollbara jest generowany całkowicie w przeglądarce – nic, co wpiszesz lub wybierzesz, nigdy nie opuszcza Twojego urządzenia.