swiper的slide内部支持滑动

Question

在react项目中用swiper实现纵向滑动切换页面的效果，某些页面的内容超出一屏的高度，需要在内部也支持滑动，能够看完所有的内容，当内部滑到底时，再切换到下一页。
现在的方法是在slide面再嵌套一个swiper，但会发生穿透。也就是slide内部滑动的时候也带动了外层页面同时滑动。
在网上找了一个方法试图阻止穿透，结果还是无效。代码如下：

return (<div className="swiper-container swiper-container-v">
    <div className="swiper-wrapper">
        {this.state.lecData.page.map((x,index)=>{
            x.TT_ID = this.state.lecData.TT_ID;
            let isLast=(index==this.state.lecData.page.length-1);
            return <div key={index} className="swiper-slide">
                <div className="swiper-container swiper-container-scrollbar">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                            {this.renderCover(x,isLast)}
                        </div>
                    </div>
                </div>
            </div>
        })}
    </div>
</div>);

componentDidMount() {
    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
    });
    var startScroll, touchStart, touchCurrent;
    swiperScrollbar.forEach(element => {
        element.slides.on('touchstart', function(e) {    
            startScroll = this.scrollTop;
            touchStart = e.targetTouches[0].pageY;  
        }, false);
        element.slides.on('touchmove', function(e) {    
            touchCurrent = e.targetTouches[0].pageY;  
            var touchesDiff = touchCurrent - touchStart;
            var _this = this;
            var onlyScrolling =  
                ( _this.scrollHeight > _this.offsetHeight ) && 
                (  
                    ( touchesDiff < 0 && startScroll === 0 ) || 
                    ( startScroll > 0 && startScroll === ( _this.scrollHeight - _this.offsetHeight ) ) || 
                    ( startScroll > 0 && startScroll < ( _this.scrollHeight - _this.offsetHeight ) )
                );
            if (onlyScrolling) {
                e.stopPropagation();
            }
        }, false);  
    });
}

.swiper-slide {
    height: 100%; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

还有什么解决方法吗？