美文网首页
关于swiper的slide内滚动的解决方案

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

作者: 不再犹豫Debug | 来源:发表于2019-09-30 10:23 被阅读0次

移动端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);

相关文章

网友评论

      本文标题:关于swiper的slide内滚动的解决方案

      本文链接:https://www.haomeiwen.com/subject/nryzectx.html