Модификации
2024-03-29 20:11 Настройка страницы

Кастомизируем скролл на сайте в Тильде

Когда разрабатываем тематические сайты на Тильде, очень часто стандартный скроллбар отвлекает от основной идеи и нарушает восприятие информации. К счастью, решить эту задачу помогает несколько строк кода.

Инструкция:
  1. Создайте блок Т123
  2. Добавьте код из примера
  3. Настройте код под ваш дизайн
  4. Опубликуйте страницу

Для того чтобы код работал на всех страницах создайте отдельный Footer и вставьте блок с кодом на эту страницу.
<!--кастомизация скроллбара на тильде  https://cubeteam.ru -->


<style>
html body {
overflow-y: overlay;
}

html *::-webkit-scrollbar {
border-radius: 0;
/* Ширина скролла*/
width: 8px;
}

html *::-webkit-scrollbar-thumb {
  /* Скругление углов скролла*/
border-radius: 0px;
/* Цвет скролла*/
background-color: rgba(45,67,215,0.3);
}

html *::-webkit-scrollbar-track {
border-radius: 0;
/* Цвет фона скролла*/
background-color: rgba(255,255,255,0,3);
}
</style>