导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

让Swiper移动端超出一屏的部分滚动显示而不是触发滑到下一页

作者:广树时间:2017-12-25 10:08:46分类:JavaScript

swiper版本为3.4.2。

因为效果需要,如果页面内容超过屏幕高度则先触发overflow的滚动条,当滚动条滚动到底部再触发swiper的页面滑动效果。

    var swiper = new Swiper('.swiper-container', {
        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 ) && 
                (
                    ( touchesDiff < 0 && startScroll === 0 ) || 
                    ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || 
                    ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) 
                );
        if (onlyScrolling) {
            e.stopPropagation();
        }
    }, true);

donate.png

1210 x 50(蓝底).png

cloudcone