scrollbar-widthNieruchomość w CSS kontroluje szerokość lub „grubość” o przewijania. scrollbar-widthjest częścią szkicu modułu Scrollbars Module Level 1 Grupy Roboczej CSS, który wciąż jest w toku. Konsensus w chwili pisania tego artykułu jest taki, że scrollbar-widthprawdopodobnie zostanie uwzględniony w przyszłych wersjach CSS, ale jest debata, czy argument zmienny będzie dozwolony, czy też opcje będą ograniczone do wstępnie ustawionych wartości (więcej o tych później) .
Dostosowanie szerokości paska przewijania jest szczególnie ważne na stronach lub interfejsach użytkownika o ograniczonej przestrzeni, gdzie przycięcie zaledwie kilku pikseli z paska przewijania (lub całkowite jego usunięcie) może dać treści wystarczająco dużo miejsca do oddychania, bez utraty możliwości przewijania.
Na przykład wyobraź sobie interfejs do edycji tekstu, w którym potrzeba zmieścić się w krótkim, wąskim kontenerze. W takiej sytuacji pasek przewijania może zająć większość dostępnej przestrzeni:
scrollbar-width: auto;
Za pomocą scrollbar-widthmożemy ustawić szerokość, thinaby zaoszczędzić trochę miejsca:
.scrollable-element ( scrollbar-width: thin; )
textarea z scrollbar-width: thin;
Lub możemy ustawić szerokość, aby nonecałkowicie ją usunąć, oszczędzając jeszcze więcej miejsca (zakładając, że nic nam nie jest ze zniknięciem paska przewijania):
.scrollable-element ( scrollbar-width: none; )
textareaz scrollbar-width: none;- i nadal możesz przewijać!
Składnia
scrollbar-width: auto | thin | none | ; Wartości
scrollbar-width akceptuje następujące wartości:
autojest wartością domyślną i wyświetli standardowe paski przewijania dla klienta użytkownika.thinpowie programowi użytkownika, aby używał cieńszych pasków przewijania, jeśli ma to zastosowanie.nonecałkowicie ukryje pasek przewijania bez wpływu na przewijalność elementu.jest przedmiotem dyskusji, ale (jeśli zostanie dodana) będzie to maksymalna szerokość paska przewijania.
Przykład
Wsparcie przeglądarki
Ma to na celu ogólne dostosowanie pasków przewijania. Aby uzyskać najlepszy sposób na stylizowanie paska przewijania w różnych przeglądarkach, zobacz tutaj.
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Nie | 81 * | 14, 0-14, 4 * |
Związane z
scrollbar-gutterscrollbar-colorscrollbar
Zasoby
- Wersja robocza modułu CSSWG Scrollbars
- Kolekcja W3C przypadków użycia do modyfikacji paska przewijania
- Przyszłość CSS: Scrollbars na dev.to
- w3c Dyskusja na Githubie na temat kontroli szerokości paska przewijania