css - 上下滑动的swiper，第二个slider高度大于屏幕，如何让它出现滚动条，像单页面那样滑动？？

Question

上下滑动的swiper，有两页，第二个slider是列表页，内容会超出屏幕高度，现在的问题是，超出部分无法通过滚动条下滑查看。

想要的效果是，第二页slider不受影响，出现滚动体爱，正常下滑查看内容。

（如果禁用swiper某个方向的移动，会导致无法滑动到上一页）

Answer 1

HTML：
<p class="swiper-container swiper-container-v">
    <p class="swiper-wrapper">
        <p class="swiper-slide">vertical Slide 1</p>
        <p class="swiper-slide">
            <p class="swiper-container swiper-container-scrollbar">
                <p class="swiper-wrapper">
                    <p class="swiper-slide">
                        <h3>title</h3>
                        <p>this is a p tag</p>
                        .....
                        .....
                        .....
                    </p>
                </p>
                <p class="swiper-scrollbar"></p>
            </p>
        </p>
        <p class="swiper-slide">vertical Slide 3</p>
        <p class="swiper-slide">vertical Slide 4</p>
    </p>
</p>



CSS：
html, body{
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-container-scrollbar .swiper-slide{
    height: auto;
}



JavaScript:
var swiperV = new Swiper('.swiper-container-v', {
    direction: 'vertical'
});

var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
    scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
    direction: 'vertical',
    slidesPerView: 'auto',
    mousewheelControl: true,
    freeMode: true,
    nested: true
});