1. 程式人生 > >swiper單屏滾動

swiper單屏滾動

middle blog list sel style des cti () !=

.swiper-slide {
    overflow: auto;
}

1. 排除某些屏,不滾動

var startScroll, touchStart, touchCurrent;
var aSlide = Array.prototype.slice.call(swiper.slides);
aSlide.forEach(function(item,index){
  //按索引排除某些屏
   if(index != 2){
        item.addEventListener(‘touchstart‘, function (e) {
            startScroll 
= this.scrollTop; touchStart = e.targetTouches[0].pageY; }, true); item.addEventListener(‘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. 按條件排除滾動,消除touchmove影響

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) {
    var slide = this;
    //排除條件
    if($(‘#swiperWrapper>.swiper-slide-active‘).next().length == 0 && document.querySelector(self.template).contains(e.target)){
        return;
    }
    touchCurrent = e.targetTouches[0].pageY;
    var touchesDiff = touchCurrent - touchStart;
    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);

swiper單屏滾動