Внутренний скролл для длинного pop-up в Тильде.
Очень удобный вариант когда нужно разместить информацию но не захламлять дизайн и ухудшать восприятие пользователя на сайт. Вы можете разместить заголовок и краткое описание для быстрой навигации на странице, а весь контент убрать в поп-ап.
Инструкция:
Очень удобный вариант когда нужно разместить информацию но не захламлять дизайн и ухудшать восприятие пользователя на сайт. Вы можете разместить заголовок и краткое описание для быстрой навигации на странице, а весь контент убрать в поп-ап.
Инструкция:
- Создать поп-ап BF503 на 8 колонок
- Добавить блок Т123
- Добавить в него код
- Обновить страницу
<!--скролл для pop-up https://cubeteam.ru -->
<style>
.t390 .t-popup__container {
border: 2px solid #2f3848;
}
.t390-cont-wrapper {
max-height: 65vh;
overflow-y: auto;
}
.t390__descr ul {
margin-top: 5px;
font-size: 12px;
}
.t390__descr ul span {
font-size: 12px !important;
}
.t390__title {
border-top: 1px solid rgb(255 255 255 / 20%);
border-bottom: 1px solid rgb(255 255 255 / 20%);
padding: 15px 0px;
margin: 35px 0px;
}
.t390__uptitle {
letter-spacing: 1px;
}
.t-popup__container:after {
content: "";
background-image: url(https://static.tildacdn.com/tild6432-3463-4365-a337-363436633835/Group_9_1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 0px;
z-index: 999;
pointer-events: none;
}
.t390 .t-popup__close {
display: none;
}
.t390 ::-webkit-scrollbar-thumb {
background: #fff; /* цвет скроллбара */
border-radius: 10px;
}
.t390 ::-webkit-scrollbar {
width: 5px;
background: #121127; /* цвет фона */
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
let popupCont = document.querySelectorAll('.t390 .t-popup__container');
for (let i = 0; i < popupCont.length; i++) {
inCont = popupCont[i].innerHTML;
newCont = "<div class='t390-cont-wrapper'>" + inCont + "</div>";
popupCont[i].innerHTML = newCont;
};
});
</script>