скролл внутри слайда на swiper.js
Всем привет. Делаю следующий функционал: вертикальный swiper.js, первые две секции растянуты на 100vh, последняя секция имеет внутренний скролл с собственным контентом. Реализовал следующим способом данный функционал, но на мобильных устройствах багует и не работает. Возможно есть другой способ решения или есть возможность решить баг на мобильных устройствах. Спасибо.
const topSlider = new Swiper('.sliderPage .swiper', {
speed: 600,
direction: 'vertical',
modules: [Mousewheel],
mousewheel: true,
mousewheel: {
noMousewheelClass: 'nowheel',
releaseOnEdges: true,
},
});
const lastSlide = document.querySelector('.swiper-slide-3');
lastSlide.addEventListener('scroll', (e) => {
if (lastSlide.scrollTop > 0 ) {
lastSlide.classList.add('nowheel');
} else if (lastSlide.scrollTop === 0) {
lastSlide.classList.remove('nowheel');
}
}).sliderPage {
height: 100vh;
.swiper {
width: 100%;
height: 100%;
&-slide {
// height: 100vh !important;
&-1 {
}
&-2 {
}
&-3 {
overflow-y: scroll;
}
}
}
}<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<section class="sliderPage">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-1">Slide 1</div>
<div class="swiper-slide swiper-slide-2">Slide 2</div>
<div class="swiper-slide swiper-slide-3">Тут секция с прокруткой lorem*100</div>
</div>
</div>
</section>