URL скопирован в буфер обмена!
Как сделать вертикальный скролл текста на Tilda
С помощью этой модификации можно добавить вертикальную прокрутку для текста или группы элементов внутри Zero Block. Дополнительно можно кастомизировать ползунок и полоску прокрутки.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Тип элемента
Класс текста
Высота текста
Цвет ползунка
Цвет фона ползунка
Ширина ползунка
Радиус скругления ползунка
Высота на экранах 320px
Высота на экранах 480px
Высота на экранах 640px
Высота на экранах 960px
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD099--><style>
.text-scroll .tn-atom{
height: 300px;
position: inherit;
overflow: auto;
}
.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" и далее, справа в настройках указываем класс
Если в генераторе в поле "Тип элемента" выбрать группу элементов Object - то в зеро блоке можно разместить несколько текстовых элементов, объединить их в группу и выбрать тип группы Object (Beta). Затем присвоить класс text-scroll группе. В этом случае скролл будет работать для всей группы. В группе кроме текста можно разместить любой другой элемент (шейп, кнопку, картинку);
2. Указываем в поле "Высота текста" высоту текста которая будет видна. Все что не поместиться будет скролиться. Для удобства адаптации можно временно разместить шейп под текст чтобы визуально видеть зону в которой будет виден текст;
3. При необходимости указываем дополнительные настройки в генераторе:
Тип элемента -
Цвет ползунка - указываем цвет ползунка;
Цвет фона ползунка - указываем цвет фона полоски прокрутки;
Ширина ползунка - указываем ширину полоски ползунка;
Радиус скругления ползунка - указываем радиус скругления углов ползунка;
Включить адаптацию на экранах - при включении чекбокса можно задать высоту текста на экранах адаптации. При адаптации все также можно временно использовать подложку из шейпа.
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! В мобильных гаджетах полоску прокрутки скрывает на уровне браузера, а также не работают стили ползунка. Полоска будет видна только в момент прокрутки.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если в генераторе в поле "Тип элемента" выбрать группу элементов Object - то в зеро блоке можно разместить несколько текстовых элементов, объединить их в группу и выбрать тип группы Object (Beta). Затем присвоить класс text-scroll группе. В этом случае скролл будет работать для всей группы. В группе кроме текста можно разместить любой другой элемент (шейп, кнопку, картинку);
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.
