让Swiper移动端超出一屏的部分滚动显示而不是触发滑到下一页
作者:广树 | 时间:2017-12-25 10:08:46 | 分类 : JavaScript/jQuery/Vue
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);
赞一个2
2019-08-13 17:01