scroll-behaviorNieruchomość w CSS pozwala nam określić, czy położenie przewijania przeglądarce przeskakuje do nowej lokalizacji lub płynnie animację przejścia, gdy użytkownik kliknie link, który celów zakotwiczony pozycja w polu przewijania.
html ( scroll-behavior: smooth; )Głębsze wyjaśnienie
Czekaj, czekaj, o czym jest to przewijane okienko, o którym mówimy? To element, którego treść przekracza swoje granice.
Zobacz okienko przewijania pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Zauważ, że pudełko w powyższym demo ma stałą wysokość 200px? Każda zawartość, która przekracza tę wysokość, znajduje się poza granicami pola i dodaliśmy, overflow-y: scrollaby ta dodatkowa zawartość była dostępna za pomocą przewijania w pionie. To właśnie rozumiemy przez przewijanie.
Załóżmy teraz, że dodajemy nawigację u góry pola, a każdy link kieruje do trzech sekcji treści:
Zobacz okienko przewijania pióra z nawigacją według CSS-Tricks (@ css-tricks) w CodePen.
Każde łącze prowadzi użytkownika bezpośrednio do różnych sekcji treści w przewijanym polu. Domyślnie to przejście jest gwałtownym skokiem.
Taki skok może być drażniący. W tym miejscu scroll-behaviorpojawia się i pozwala nam ustawić płynne przejście przewijania. Ten rodzaj rzeczy był używany do wymyślnego Javascript, ale scroll-behaviorda nam możliwość zrobienia tego natywnie w CSS, gdy poprawi się obsługa przeglądarki.
Składnia
.module ( scroll-behavior: ( auto | smooth ); )Wartości
scroll-behaviorWłaściwość przyjmuje dwie wartości, które zasadniczo przełącznik Gładka przewijania funkcję włączania i wyłączania.
auto(domyślnie): Ta wartość umożliwia gwałtowne przeskakiwanie między elementami w przewijanym polu.smooth: Zgodnie ze swoją nazwą ta wartość to płynne animowane przejście między elementami w przewijanym polu.
Próbny
Poniższe demo będzie działać tylko w Chrome 61+, Firefox 36+ i Opera 48+ w momencie pisania tego tekstu.
Zobacz okienko przewijania pióra w / `scroll-zachowanie` autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Wsparcie przeglądarki
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 |
|---|---|---|---|---|
| 61 | 36 | Nie | 79 | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |
Więcej informacji
- Moduł widoku CSSOM: szkic specyfikacji, w tym właściwość CSS. Obecna wersja robocza zawiera zalecenie, aby przenieść specyfikację
scroll-behaviordo innej specyfikacji, więc ciekawie będzie zobaczyć, gdzie wyląduje. - Mozilla Developer Network: Dokumentacja MDN dotycząca specyfikacji
- Stan platformy Microsoft Edge: obecnie wyświetla stan tej funkcji jako W trakcie rozpatrywania
- Stan platformy Chrome: obecnie pokazuje stan tej funkcji jako W trakcie opracowywania i oprócz stanów innych platform
- Smooth Scrolling Snippet: fragmenty umożliwiające płynne przewijanie za pomocą JavaScript i jQuery
- Płynne przewijanie i dostępność: post CSS-Tricks na temat wpływu płynnego przewijania z włączoną obsługą JavaScript