javascript - 移动端使用Swiper做页面切换,需求是在最后一页需要内容超出一屏后出现滚动条滚动,该怎么做?
怪我咯
怪我咯 2017-04-11 09:13:08
[JavaScript讨论组]

1、整体页面是h5页面滑动,前面的页面都不会超过一屏
2、最后一个页面超过一屏,希望能够出现滚动条看到完整的信息

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
天蓬老师

overflow:scroll

伊谢尔伦
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 ) && //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);

同时把要滚动的slide的css样式设置为: overflow-y:scroll;

高洛峰

你好,我也碰到了这种问题,请问一下您是怎么解决的?

高洛峰

https://github.com/nolimits4w...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号