关于swiper的slide内滚动的解决方案

2019-09-30  本文已影响0人  不再犹豫Debug

移动端swiper纵向滚动时,经常会遇到单个slide也超出一屏而需要内部滚动的需求。之前就解决过一次,这次遇到时又想了半天。没记住上次咋解决的,尴尬。。还是把方法记录下来。供下次参考。
方法很简单,是swiper作者给出的解决方案。代码如下

var swiper = new Swiper('#swiper', {
    direction: 'vertical',
});
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);
上一篇 下一篇

猜你喜欢

热点阅读