swiper内容超出一屏完全显示

原理:在内容位置区域,使用 e.stopPropagation();阻止事件冒泡(触发翻页),当滑动到顶部或者底部时,解除e.stopPropagation()。

.swiper-slide{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    overflow: auto  /*overflow :auto 必须*/
}
    var startScroll, touchStart, touchCurrent;
        swiper.slides.on('touchstart', function (e) {
            startScroll = this.scrollTop;  //当前获取滚动条顶部的偏移
            touchStart = e.targetTouches[0].pageY; //手指触碰位置距离盒子顶部距离
        }, true);
        swiper.slides.on('touchmove', function (e) {
            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var onlyScrolling = 
                    ( slide.scrollHeight > slide.offsetHeight ) &&
                    (
                        ( touchesDiff < 0 && startScroll === 0 ) ||
                        ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||
                        ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )
                    );
            if (onlyScrolling) {
                e.stopPropagation();
            }
        }, true);

转自:https://blog.csdn.net/Yw_better/article/details/82498306

猜你喜欢

转载自blog.csdn.net/qq_32849999/article/details/83113449
今日推荐