У меня есть анимированный модал fancybox 3 с длинным телом.
Существует проблема с прокруткой на мобильных телефонах, но только старые, iphone 6s или galaxy s8 работают нормально.
Он захватывает все фантазии и отталкивает, а не прокручивает содержимое тела.
Я пытался добавить переполнение: прокрутка, фиксированное положение, но это не помогает.
Когда я нахожусь в инспекторе, с включенным мобильным режимом, я могу прокручивать его с помощью колесика мыши, при попытке «прикоснуться» к нему и прокрутить, модальный режим отключен.
CodePen показывает, что происходит :(
https://codepen.io/anon/pen/MZPPYd
Редактировать: В codepen все работает, НО
Когда я вхожу в codepen, fancybox добавляет класс fancybox-is-grabbing
В моем проекте он добавляет контроллеры fancybox - isGrabbing
Это может быть проблемой, но почему он это делает?
Что делать?
Есть ли возможность заставить его работать?
Ниже структура моего кода.
<div style="display: none;" id="animatedModal3" class="animated-modal modalLists">
<div class="leftPhoto tabsListConfigurator side">
<div class="tabsWrap">
<div class="sectionTitle">Kolory</div>
<ul class="tabsCon">
<li class="tab-link current" data-tab="tab-1a">
<img src="3.jpg" alt="">
<span class="product">Drewno</span>
</li>
<li class="tab-link current" data-tab="tab-1a">
<img src="3.jpg" alt="">
<span class="product">Drewno</span>
</li>
<li class="tab-link current" data-tab="tab-1a">
<img src="3.jpg" alt="">
<span class="product">Drewno</span>
</li>
(a lot li here)
</ul>
</div>
</div>
</div>
</div>
.animated-modal{
width:80%;
overflow:hidden;
position:fixed;
}
.tabsListConfigurator{
max-height:500px;
overflow:auto;
overflow-scrolling:auto;
}
.tabsWrap{
position:relative;
overflow-y:scroll;
}