我们在使用Swiper做多屏幕切换效果的时候, 会遇到 在单页面内的长轴内容是无法滑动的,下面的代码 可以很好的去解决这个问题;
其中,$(".container .slide.dreamer .dream-list") 是单个页面要滑动的内容
var startScroll, touchStart, touchCurrent;
$(".container .slide.dreamer .dream-list").on('touchstart', function(e) {
startScroll = this.scrollTop;
touchStart = e.targetTouches[0].pageY;
});
$(".container .slide.dreamer .dream-list").on('touchmove', function(e) {
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
console.log(touchesDiff);
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
(touchesDiff > 0 && startScroll > touchesDiff) ||
(startScroll > 0 && startScroll + 1 < (slide.scrollHeight - slide.offsetHeight)) //start from the middle
);
if(onlyScrolling) {
e.stopPropagation();
}
});