В scroll-behaviorимота в CSS ни дава възможност да се определи дали мястото за превъртане на браузъра скача на ново място или гладко анимира на прехода, когато потребителят кликне върху връзка, която цели закотвен позиция в рамките на превъртане кутия.
html ( scroll-behavior: smooth; )По-задълбочено обяснение
Чакай, чакай, за какво говорим това поле за превъртане? Това е елемент със съдържание, който надхвърля границите си.
Вижте полето за превъртане на писалката от CSS-Tricks (@ css-tricks) на CodePen.
Забележете как кутията в демото по-горе има фиксирана височина от 200px? Всяко съдържание, което надвишава тази височина, е извън границите на полето и ние добавихме, за overflow-y: scrollда направим това допълнително съдържание достъпно с вертикално превъртане. Това имаме предвид под поле за превъртане.
Сега да кажем, че добавяме навигация в горната част на полето с всяка връзка, насочена към трите раздела на съдържанието:
Вижте Кутията за превъртане на писалката с Nav от CSS-трикове (@ css-трикове) на CodePen.
Всяка връзка отвежда потребителя директно до различните раздели на съдържанието в полето за превъртане. По подразбиране този преход между тях е рязък скок.
Този вид скок може да бъде смущаващ. Тук scroll-behaviorвлиза и ни позволява да зададем плавен превъртащ се преход. Подобни неща използваха фантастичен Javascript, но scroll-behaviorще ни дадат възможност да го направим в CSS, след като поддръжката на браузъра се подобри.
Синтаксис
.module ( scroll-behavior: ( auto | smooth ); )Стойности
В scroll-behaviorимота приема две стойности, които по същество за превключване на гладко скролиране включва и изключва функцията.
auto(по подразбиране): Тази стойност позволява рязък скок между елементи в полето за превъртане.smooth: Вярно с името си, тази стойност е плавният анимиран преход между елементи в полето за превъртане.
Демонстрация
Следващата демонстрация ще работи само на Chrome 61+, Firefox 36+ и Opera 48+ по време на писането.
Вижте полето за превъртане на писалката с „превъртане-поведение“ от CSS-трикове (@ css-трикове) на CodePen.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 61 | 36 | Не | 79 | Не |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Не |
Повече информация
- CSSOM View Module: Проектът на спецификация, включително CSS свойството. Настоящият проект включва препоръка за преместване на
scroll-behaviorдруга спецификация, така че ще бъде интересно да се види къде ще кацне. - Mozilla Developer Network: MDN справка за спецификацията
- Състояние на платформата на Microsoft Edge: Понастоящем показва състоянието на тази функция като Под разглеждане
- Състояние на платформата на Chrome: Понастоящем показва състоянието на тази функция като В процес на разработка и включва състояния за други платформи като отделно
- Плавно превъртане на фрагмент: фрагменти, за да се даде възможност за плавно превъртане с Javascript и jQuery
- Плавно превъртане и достъпност: CSS-трикове публикация за въздействието на гладко превъртане с активиран Javascript