Loading...
Время настройки: 2 минуты

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

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

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


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

2. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;
Генератор примера доступен только на десктопной версии (Пк или ноутбук)
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
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>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda