Swiper内容超出添加横向/纵向滚动

在使用Swiper做移动端内容切换时,有些swiper-slide节点中的内容超出节点的宽度或高度,想要在swiper-slide节点中添加滚动条,当滚动条滚动到节点的顶部/左侧时切换上一个swiper-slide节点,当滚动条滚动到节点的底部/右侧时切换下一个swiper-slide节点,要肿么实现嘞?

首先要设置swiper-slide的overflow属性

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

1、swiper内容超出添加纵向滚动条

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 ) && //allow only when slide is scrollable
            (
                ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom
                ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
                ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
            );
    if (onlyScrolling) {
        e.stopPropagation();
    }
}, true);

2、swiper内容超出添加横向滚动条

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 ) && //allow only when slide is scrollable
            (
                ( touchesDiff < 0 && startScroll === 0 ) || //start from left edge to scroll right
                ( touchesDiff > 0 && startScroll === ( slide.scrollWidth - slide.offsetWidth ) ) || //start from right edge to scroll left
                ( startScroll > 0 && startScroll < ( slide.scrollWidth - slide.offsetWidth ) ) //start from the middle
            );
    if (onlyScrolling) {
        e.stopPropagation();
    }
}, true);


你可能感兴趣的:(JS)