Swiper滑块：开启Mousewheel Control时，最后一屏允许页面滚动

当然可以实现这个需求，最简单的方式是利用Swiper Mousewheel模块内置的releaseOnEdges配置项，它能让滑块处于边缘（首屏/末屏）时，将鼠标滚轮事件传递给页面，从而允许继续滚动页面。

修改后的滑块配置代码 #

let swiper = new Swiper(".mySwiper", {
  speed: 600,
  direction: 'vertical',
  parallax: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  mousewheel: {
    sensitivity: 1,
    releaseOnEdges: true // 添加这个配置项
  }
});

原理说明 #

当releaseOnEdges设为true时：

• 滑块滚动到最后一屏（垂直方向的最底部），继续向下滚动鼠标滚轮，事件会被释放给页面，页面就能正常滚动
• 同理，滑块在第一屏时，向上滚动滚轮也会触发页面滚动

如果需要更精细的控制（比如只允许末屏向下滚动页面，首屏不允许向上滚动），可以通过监听Swiper的事件手动切换mousewheel的启用状态：

let swiper = new Swiper(".mySwiper", {
  // 原有配置...
  mousewheel: {
    sensitivity: 1,
    enabled: true
  }
});

// 监听滑块到达末屏事件
swiper.on('reachEnd', function() {
  this.mousewheel.disable();
});

// 监听滑块离开末屏事件
swiper.on('slideChange', function() {
  if (!this.isEnd) {
    this.mousewheel.enable();
  }
});

内容的提问来源于stack exchange，提问作者Igor Proshyn