URL скопирован в буфер обмена!
Как сделать вертикальный скролл текста на Tilda
С помощью этой модификации можно сделать добавить вертикальную прокрутку для текста внутри зеро блок. Дополнительно можно кастомизировать ползунок и полоску прокрутки.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс текста
Высота текста
Цвет ползунка
Цвет фона ползунка
Ширина ползунка
Радиус скругления ползунка
Высота на экранах 320px
Высота на экранах 480px
Высота на экранах 640px
Высота на экранах 960px
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD077--><style>
.text-scroll .tn-atom{
height: 300px;
overflow: auto;
position: inherit;
}
.text-scroll .tn-atom {
scrollbar-width: auto;
}
.text-scroll .tn-atom::-webkit-scrollbar-thumb {
background: #F96855;
border-radius: 0px;
}
.text-scroll .tn-atom::-webkit-scrollbar-track {
background: #FDC8BE;
border-radius: 0px;
}
.text-scroll .tn-atom::-webkit-scrollbar {
width: 7px;
}
@media (max-width: 1200px) {
.text-scroll .tn-atom{
height: px;
}
}
@media (max-width: 960px) {
.text-scroll .tn-atom{
height: px;
}
}
@media (max-width: 640px) {
.text-scroll .tn-atom{
height: px;
}
}
@media (max-width: 480px) {
.text-scroll .tn-atom{
height: px;
}
}
</style>
1. Создаем в Zero Block текстовый элемент и назначаем ему класс text-scroll
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем поле "Высота текста" высоту текста которая будет видна. Все что не поместиться будет скролиться. Для удобства адаптации можно временно разместить шейп под текст чтобы визуально видеть высоту текста которую будет указывать в генераторе;
3. При необходимости указываем дополнительные настройки в генераторе:
Цвет ползунка - указываем цвет ползунка;
Цвет фона ползунка - указываем цвет фона полоски прокрутки;
Ширина ползунка - указываем ширину полоски ползунка;
Радиус скругления ползунка - указываем радиус скругления углов ползунка;
Включить адаптацию на экранах - при включении чекбокса можно задать высоту текста на экранах адаптации. При адаптации все также можно временно использовать подложку из шейпа.
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! В мобильных гаджетах полоску прокрутки скрывает на уровне брузера, а также не работают стили. Полоска будет видна только в момент прокрутки.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем поле "Высота текста" высоту текста которая будет видна. Все что не поместиться будет скролиться. Для удобства адаптации можно временно разместить шейп под текст чтобы визуально видеть высоту текста которую будет указывать в генераторе;
3. При необходимости указываем дополнительные настройки в генераторе:
Цвет ползунка - указываем цвет ползунка;
Цвет фона ползунка - указываем цвет фона полоски прокрутки;
Ширина ползунка - указываем ширину полоски ползунка;
Радиус скругления ползунка - указываем радиус скругления углов ползунка;
Включить адаптацию на экранах - при включении чекбокса можно задать высоту текста на экранах адаптации. При адаптации все также можно временно использовать подложку из шейпа.
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! В мобильных гаджетах полоску прокрутки скрывает на уровне брузера, а также не работают стили. Полоска будет видна только в момент прокрутки.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
