zoukankan      html  css  js  c++  java
  • swiper单屏滚动

    .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);
  • 相关阅读:
    飞思卡尔硬件 调试总结
    芯片散热器
    (028)[技术资料]et99加密狗打开函数的一个小bug
    (027)[技术资料]业余制作Windows图标
    (026)[工具软件]剪切板管理:Ditto
    (025)[系统故障]XP下禁止将串口设备识别成鼠标(转)
    (024)[工具软件]截屏录屏软件FSCapture(转)
    (023) 关于51单片机的A5指令
    (022)[工具软件]图片浏览 JPEGView
    (021)VMWare副虚拟磁盘和子虚拟磁盘id不匹配
  • 原文地址:https://www.cnblogs.com/mengff/p/7611805.html
Copyright © 2011-2022 走看看