scroll-behaviorИмовина у ЦСС нам омогућава да дефинишете да ли је померање локација претраживача скаче на нову локацију или глатко анимира транзицију када корисник кликне на линк који циљева сидрене положај унутар скроловање кутији.
html ( scroll-behavior: smooth; )Дубље објашњење
Чекај, чекај, о чему је ово окретно поље за помицање? То је елемент са садржајем који прелази своје границе.
Погледајте оквир за померање оловке компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Приметите како оквир у демонстрацији изнад има фиксну висину од 200px? Било који садржај који премашује ту висину изван је оквира оквира и додали overflow-y: scrollсмо да тај додатни садржај учинимо доступним вертикалним померањем. То је оно што подразумевамо под оквиром за померање.
Рецимо сада да на врх оквира додамо навигацију са сваком везом која циља три одељка садржаја:
Погледајте оквир за померање оловке са Нав од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Свака веза води корисника директно до различитих одељака садржаја унутар оквира за померање. Подразумевано је тај прелаз између нагли скок.
Таква врста скока може бити незгодна. Ту scroll-behaviorдолази и омогућава нам да поставимо глатки прелаз помицања. Овакве ствари су некада узимале фенси Јавасцрипт, али scroll-behaviorће нам дати могућност да то урадимо у ЦСС-у, чим се побољша подршка за прегледач.
Синтакса
.module ( scroll-behavior: ( auto | smooth ); )Вредности
scroll-behaviorИмовине прихвата две вредности, које у суштини искључи Глатко померање функцију и гаси.
auto(подразумевано): Ова вредност омогућава нагли скок између елемената у оквиру за померање.smooth: Тачно са својим именом, ова вредност је глатки анимирани прелаз између елемената у оквиру за померање.
Демо
Следећи демо ће радити само на Цхроме 61+, Фирефок 36+ и Опера 48+ у време писања овог текста.
Погледајте оквир за помицање оловке са `понашањем помицања` од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 61 | 36 | Не | 79 | Не |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | Не |
Више информација
- ЦССОМ модул приказа: Нацрт спецификације, укључујући својство ЦСС. Тренутни нацрт укључује препоруку да се пребаци
scroll-behaviorна другу спецификацију, па ће бити занимљиво видети где ће то стати. - Мозилла Девелопер Нетворк: МДН референца за спецификацију
- Статус Мицрософт Едге Платформ: Тренутно приказује статус ове функције као Ундер разматрање
- Статус Цхроме платформе: Тренутно приказује статус ове функције као У развоју и укључује статусе за друге платформе по страни
- Глатко помицање исјечка: Исјечци који омогућавају глатко помицање помоћу Јавасцрипта и јКуери-а
- Глатко помицање и приступачност: ЦСС-трикови о утицају глатког помицања с омогућеним Јавасцриптом