Loading...
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа
Время настройки: 2 минуты

Как кастомизировать скроллбар в Tilda?

Модификация поможет изменить скроллбар, а конкретно: цвет, фон, скругление, толщину и добавить тень
Генератор кода
Видео инструкция
Инструкция (Развернуть↓)

ВАЖНО: Ряд настроек могут не учитываться на различных браузерах:


  • Mozilla Firefox Windows | Учитывается цвет ползунка и фона;
  • Mozilla Firefox Mac | Не меняет скроллбар;
1. Настраиваем стили скроллбара;

2. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;
Генератор примера доступен только на десктопной версии (Пк или ноутбук)
Class элемента
Копировать код<!-- Как кастомизировать скроллбар в Tilda? --> 
<!-- https://nolim.cc/custom-scrollbar --> 
<style> html { scrollbar-color: #0059ff #f5ff66; scrollbar-width: thin; } html::-webkit-scrollbar { width: 20px !important; -webkit-appearance: none !important; } html::-webkit-scrollbar-track { background: #FFD3D3 !important; } html::-webkit-scrollbar-thumb:hover { background: #f5ff66 !important; } html::-webkit-scrollbar-thumb { background: #FF0000 !important; border: 2px solid #000 !important; -webkit-border-radius: 20px !important;  box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), inset -2px -2px 2px rgb(0 0 0 / 25%);  } </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 400р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda