Top.Mail.Ru
Модификации
Формы

Внутренний скролл для длинного pop-up в Тильде

Внутренний скролл для длинного pop-up в Тильде.
Очень удобный вариант когда нужно разместить информацию но не захламлять дизайн и ухудшать восприятие пользователя на сайт. Вы можете разместить заголовок и краткое описание для быстрой навигации на странице, а весь контент убрать в поп-ап.

Инструкция:
  1. Создать поп-ап BF503 на 8 колонок
  2. Добавить блок Т123
  3. Добавить в него код
  4. Обновить страницу
<!--скролл для 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>