scrollbar-gutterObiekt zapewnia elastyczność w celu ustalenia, w jaki sposób przestrzeń przeglądarka używa, aby wyświetlić pasek przewijania, który współdziała z treści na ekranie. Specyfikacja opisuje to jako „rezerwację miejsca na pasek przewijania” i to ma sens, ponieważ ostatecznie tym właśnie jest rynna: pojemnik, który rezerwuje miejsce na wszystko, co się w nim znajduje i oddziela to od innych elementów.
Więc wszyscy jesteśmy na tej samej stronie, pasek przewijania to to, co zwykle znajduje się po prawej stronie przeglądarki (formalnie określane jako „klient użytkownika” - lub UA - w specyfikacji), które wskazuje pozycję przewijania w stosunku do całości dostępne miejsce na stronie.
Były to tradycyjnie wizualne pojemniki z przesuwanym wskaźnikiem. Są one określane jako klasyczne paski przewijania . Wskaźnik znajduje się wewnątrz rynny, a rynna zajmuje fizyczną nieruchomość na ekranie, gdy jest wyświetlana.
Ostatnio jednak wygląd paska przewijania ma tendencję do czegoś znacznie bardziej minimalnego. Nazywamy te nakładkowe paski przewijania i są one częściowo lub całkowicie przezroczyste, gdy znajdują się nad zawartością strony. Innymi słowy, w przeciwieństwie do klasycznych pasków przewijania, które zajmują fizyczne miejsce na ekranie, nakładkowe paski przewijania znajdują się nad zawartością ekranu.
Skoro już o tym mowa, paski przewijania mogą pojawiać się w innych miejscach. Oprócz umieszczenia równo z prawej strony przeglądarki, zobaczymy paski przewijania w elementach HTML, w których zawartość przepełnia element, a overflowwłaściwość (lub overflow-xi overflow-y) jest ustawiona na scrollwartość. I zauważ, że istnienie overflow-xoznacza, że oprócz przewijania w pionie mamy przewijanie w poziomie.
O tym właśnie mówimy. Nie sam wskaźnik, ale pojemnik, który go trzyma. To jest rynna. To, czy przeglądarka używa klasycznego paska przewijania, czy nakładki, zależy całkowicie od samej UA. To nie do nas należy decyzja. Tak jest w przypadku szerokości paska przewijania. Program użytkownika definiuje to i nie daje nam nad tym kontroli.
I tu scrollbar-gutterpojawia się. Możemy przeliterować, czy rynna jest obecna w jej klasycznej i nakładanej wariacji.
Składnia
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Podwójny znak ampersand (&&) oddziela dwa lub więcej składników, z których wszystkie muszą wystąpić w dowolnej kolejności.
Znak zapytania (?) Wskazuje, że poprzedzający go typ, słowo lub grupa jest opcjonalna (występuje zero lub jeden raz).
Wartości
auto(wartość początkowa): prawie domyślne zachowanie opisane do tej pory. Ustawienie właściwości na tę wartość umożliwia klasycznym paskom przewijania korzystanie z nieruchomości w interfejsie użytkownika w elementach, w którychoverflowwłaściwość tych elementów jest ustawiona nascrolllubauto. I odwrotnie, nakładkowe paski przewijania nie zajmują w ogóle miejsca, siedząc na elemencie.stable: Dodaje to trochę uparte zachowanie, zawsze rezerwując miejsce dla rynny paska przewijania, o ileoverflowwłaściwość tego samego elementu jest ustawiona nascrolllubautoi mamy do czynienia z klasycznym paskiem przewijania - nawet jeśli pole nie jest przepełnione. I odwrotnie, nie będzie to miało wpływu na pasek przewijania nakładki.always: Działa tak samo,stableale zapewnia, że miejsce na rynnę paska przewijania jest zawsze zarezerwowane, niezależnie od tego, czy pasek przewijania jest klasyczny, czy nakładany i niezależnie od tego, czy zawartość jest przepełniona, czy nie.both: Oznacza to, że rynna paska przewijania zostanie umieszczona po obu stronach elementu, gdy zostanie wyświetlona rynna domyślna. Możesz zobaczyć, jak może się to przydać, jeśli Twój projekt wymaga równych odstępów po obu stronach elementu.force: To jest taka sama jak zastosowanie zarównostableialwaysgdzie elementuoverflowjest ustawiony naauto,scroll,visible,hiddenlubclip.
Wersja robocza specyfikacji ma bardzo przydatną tabelę, która dzieli te definicje na ich konteksty, aby pokazać ich związek z klasycznymi i nakładanymi paskami przewijania.
| Klasyczne paski przewijania | Nakładaj paski przewijania | ||||
|---|---|---|---|---|---|
| przelewowy | scrollbar-gutter | Wezbrany | Nie przepełniony | Wezbrany | Nie przepełniony |
| zwój | automatyczny | sol | sol | ||
| stabilny | GM | sol | |||
| zawsze | sol | sol | sol | sol | |
| automatyczny | sol | ||||
| stabilny | sol | sol | |||
| zawsze | sol | sol | sol | sol | |
| widoczny, ukryty, klips | automatyczny | ||||
| stabilny | fa? | fa? | |||
| zawsze | fa? | fa? | fa? | fa? | |
„G” oznacza przypadki, w których miejsce jest zarezerwowane dla rynny paska przewijania, „f?” przypadki, w których miejsce jest zarezerwowane dla rynny paska przewijania, jeśli określono siłę, oraz przypadki pustych komórek, w których brak miejsca jest zarezerwowany.
Stan specyfikacji
scrollbar-gutterWłaściwość jest zdefiniowana na poziomie 4 modułu przepełnienia, który ma status Wersja robocza. Oznacza to, że jest to nadal w toku i może się zmienić od teraz do czasu, gdy projekt przejdzie do rekomendacji kandydata.
specyfikacja modułu przepełnienia poziomu 3 jest również wersją roboczą, więc jest to dobra wskazówka, że (1) zajmie trochę czasu, zanim scrollbar-gutterstanie się rekomendacją, a (2) nadal jest w trakcie.
Wsparcie przeglądarki
W momencie ostatniej aktualizacji brak obsługi przeglądarek.
Więcej informacji
- Wersja robocza modułu przepełnienia CSS poziomu 4
- GitHub, wydanie # 92
- Grupa robocza ds. CSS w TPAC: Co nowego w CSS? Zawiera odręczną propozycję tabeli przedstawiającej zachowanie wartości właściwości.