swiper超出内容部分显示滚动条

最新推荐文章于 2023-03-27 18:04:57 发布

王小花__

最新推荐文章于 2023-03-27 18:04:57 发布

阅读量3.5k

点赞数

文章标签： swiper js

本文链接：https://blog.csdn.net/qq_26516509/article/details/79003091

版权

若想swiper实现这种效果，超出部分显示滚动条，可进行滑动

首先在css设置swiper-slide的overflow属性：

.swiper-slide {  
    overflow: auto;  
    -webkit-overflow-scrolling: touch;   
}

js部分，超出部分添加横向滚动条

var swiper = new Swiper('.swiper-container', {    
    direction: 'vertical',  
    autoHeight: true  
});  
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);

js部分，超出部分添加纵向滚动条

var swiper = new Swiper('.swiper-container', {    
    slidesPerView: 'auto'  
});  
var startScroll, touchStart, touchCurrent;    
swiper.slides.on('touchstart', function (e) {    
    startScroll = this.scrollLeft;  
    touchStart = e.targetTouches[0].pageX;  
}, true);  
swiper.slides.on('touchmove', function (e) {    
    touchCurrent = e.targetTouches[0].pageX;  
    var touchesDiff = touchCurrent - touchStart;  
    var slide = this;  
    var onlyScrolling =  
            ( slide.scrollWidth > slide.offsetWidth ) && 
            (  
                ( touchesDiff < 0 && startScroll === 0 ) || 
                ( touchesDiff > 0 && startScroll === ( slide.scrollWidth - slide.offsetWidth ) ) || 
                ( startScroll > 0 && startScroll < ( slide.scrollWidth - slide.offsetWidth ) ) 
            );  
    if (onlyScrolling) {  
        e.stopPropagation();  
    }  
}, true);