<style>
.sonneto-scroll .tn-atom {
max-height: 400px;
position: inherit;
overflow: auto;
overflow-x: hidden !important;
scrollbar-width: auto;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar-thumb {
background: #09090b;
border-radius: 5px;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar-track {
background: #F4F4F5;
border-radius: 5px;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar {
width: 6px;
}
max-width: 1200px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 960px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 640px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 480px .sonneto-scroll .tn-atom {
max-height: px;
}
</style>
.sonneto-scroll .tn-atom {
max-height: 400px;
position: inherit;
overflow: auto;
overflow-x: hidden !important;
scrollbar-width: auto;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar-thumb {
background: #09090b;
border-radius: 5px;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar-track {
background: #F4F4F5;
border-radius: 5px;
}
.sonneto-scroll .tn-atom::-webkit-scrollbar {
width: 6px;
}
max-width: 1200px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 960px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 640px .sonneto-scroll .tn-atom {
max-height: px;
}
max-width: 480px .sonneto-scroll .tn-atom {
max-height: px;
}
</style>
Настройки модификации
- Открываем Zero Block и заходим в режим редактирования.
- Размещаем в нём HTML элемент и присваиваем ему собственный класс: sonneto-scroll
- В настройках текста задаём содержимое, которое нужно отображать со скроллом.
- Далее добавляем блок T123 и вставляем в него подготовленный код.
Модификатор добавляет вертикальную прокрутку внутри текста.
Вертикальный скролл текста
Теги
Модификация
#
CSS
#
Текст
#
Слайдеры
#
не доступно
id:
Подключение скриптов
Базовые настройки
- Для корректной работы эффекта блок с текстом должен иметь класс sonneto-scroll.
- Максимальная высота задаётся через свойство max-height, при превышении появляется кастомный скролл.
- Скроллбар стилизован с помощью CSS — можно задать цвет ползунка (::-webkit-scrollbar-thumb), цвет дорожки (::-webkit-scrollbar-track), ширину (::-webkit-scrollbar), а также скругление углов (border-radius).
- Для разных разрешений предусмотрены отдельные значения max-height, чтобы адаптивность сохранялась на всех устройствах.
Технические советы
- В Firefox и Safari возможны отличия в отображении скроллбара — лучше проверять результат в нескольких браузерах.
- Если текст очень длинный, оптимально задать разумное значение max-height, чтобы не перегружать страницу.
- На мобильных устройствах рекомендуется уменьшать высоту блока для удобства чтения.
- Если цвет скролла слишком контрастный с дизайном, можно изменить фон дорожки и цвет ползунка внутри кода.
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!