Анимация при появлении полосы прокрутки ⇐ CSS
-
Гость
Анимация при появлении полосы прокрутки
Я заметил недавнее обновление на веб-сайте Yarn и заметил, что всякий раз, когда есть HTML-элемент с «overflow: auto», при появлении полосы прокрутки у него появляется очень приятная анимация — своего рода «перепрыгивание» на свое место.< /п> В моем веб-приложении есть элемент div с переполнением: auto, и я также хотел бы добавить эту анимацию. Не могли бы вы помочь мне в этом?
Пример анимации можно увидеть здесь: https://yarnpkg.com/package?name=d3. Нажмите на вкладку «Версии» в боковом меню, и вы увидите анимацию полосы прокрутки, когда она появится.
HTML:
содержимое div, которое может вызвать переполнение... CSS:
.sidebar-view { стиль боковой панели.... переполнение-у: авто; } .sidebar-view::-webkit-scrollbar { ширина: 8 пикселей; высота: 8 пикселей; } .sidebar-view::-webkit-scrollbar-thumb { цвет фона: #666; радиус границы: 10 пикселей; } .sidebar-view::-webkit-scrollbar-thumb:hover { цвет фона: #555; }
Я заметил недавнее обновление на веб-сайте Yarn и заметил, что всякий раз, когда есть HTML-элемент с «overflow: auto», при появлении полосы прокрутки у него появляется очень приятная анимация — своего рода «перепрыгивание» на свое место.< /п> В моем веб-приложении есть элемент div с переполнением: auto, и я также хотел бы добавить эту анимацию. Не могли бы вы помочь мне в этом?
Пример анимации можно увидеть здесь: https://yarnpkg.com/package?name=d3. Нажмите на вкладку «Версии» в боковом меню, и вы увидите анимацию полосы прокрутки, когда она появится.
HTML:
содержимое div, которое может вызвать переполнение... CSS:
.sidebar-view { стиль боковой панели.... переполнение-у: авто; } .sidebar-view::-webkit-scrollbar { ширина: 8 пикселей; высота: 8 пикселей; } .sidebar-view::-webkit-scrollbar-thumb { цвет фона: #666; радиус границы: 10 пикселей; } .sidebar-view::-webkit-scrollbar-thumb:hover { цвет фона: #555; }
Мобильная версия