Как использовать CSS3 Transition для настройки прокрутки страницы

Question

Я ищу способ использовать CSS3 Transition для создания плавной прокрутки страницы.Я знаю, как это сделать с помощью javascript, но если есть способ сделать это с помощью CSS3, я бы предпочел это для повышения производительности.

Answer 1

Вы не можете управлять поведением прокрутки с помощью css. Переходы CSS3 позволяют указать, как элемент будет переходить из одного состояния в другое, прокрутка - это функция браузера, недоступная для CSS.

Answer 2

Вы можете использовать transform: translate(x,y) для имитации "прокрутки", и это можно анимировать с помощью переходов через transition-property: all; Обратите внимание, что вам придется добавить соответствующий префикс вендора, как в большинстве случаев с CSS3 на данный момент.

Ссылки: Центр разработки Mozilla: преобразование , Центр разработки Mozilla: переходы CSS

P.S. используйте проценты осторожно с transform: translate() - в зависимости от того, как обернут ваш элемент, -100% может означать следующий раздел «display-height» содержимого