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

导航

侧边栏

攻略中

暂无评分

NS节奏天国奇迹之星

2026年7月08日 20时 ~ 攻略中

已累计游玩1个月19天

《节奏天国：奇迹之星》是一款轻松又充满创意的音乐节奏游戏，玩家只需跟随音乐节拍按下按键，就能完成跳跃、敲击空罐、制作料理等各种有趣的小挑战。游戏延续了《节奏天国》系列简单易上手、节奏感强、画风幽默的特点，让玩家在一个个短小精巧的关卡中感受音乐与反应力结合的乐趣，适合喜欢节奏游戏和轻松休闲玩法的玩家体验。

让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);