关于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);
发布了18 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/Yw_better/article/details/82498306