Swiper.js 最后一张slide滑动结束后支持页面继续滚动及向上回滚方案

核心思路 #

• 修正原有轮播切换事件的逻辑：仅当切换到最后一张轮播slide时才禁用鼠标滚轮控制，避免中间slide操作被误拦截
• 监听全局页面滚动事件，判断轮播容器#slider是否回到视口范围内，符合条件时自动重新启用Swiper的鼠标滚轮控制
• 给滚动事件添加防抖优化，避免高频触发逻辑影响页面性能

完整实现代码 #

// 清理重复配置项后的Swiper初始化
var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  speed: 1000,
  spaceBetween: 0,
  roundLengths: true,
  centeredSlides: true,
  mousewheel: {
    forceToAxis: true,
    sensitivity: 1,
    releaseOnEdges: true,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: false,
  },
});

// 切换结束事件：仅最后一张slide时禁用滚轮
swiper.on('slideChangeTransitionEnd', function () {
  if (swiper.activeIndex === swiper.slides.length - 1) {
    swiper.mousewheel.disable();
  }
});

// 全局滚动监听，回到轮播区时重新启用滚轮控制
let scrollDebounceTimer = null
window.addEventListener('scroll', () => {
  // 防抖处理
  if (scrollDebounceTimer) clearTimeout(scrollDebounceTimer)
  scrollDebounceTimer = setTimeout(() => {
    const sliderSection = document.getElementById('slider')
    // 轮播区块底部距离视口顶部大于0，说明轮播已进入视口范围
    const isSliderInViewport = sliderSection.getBoundingClientRect().bottom > 0
    if (isSliderInViewport && !swiper.mousewheel.enabled) {
      swiper.mousewheel.enable()
      // 可选配置：如果需要回到轮播区时默认停在最后一张，避免出现异常跳转动画，可打开下方注释
      // swiper.slideTo(swiper.slides.length - 1, 0)
    }
  }, 100)
})

注意事项 #

• 原有初始化代码中重复定义的direction、slidesPerView、mousewheel配置会被后定义的内容覆盖，已在上述代码中做了清理，保留了鼠标滚轮的自定义配置
• 如果你的轮播区块高度不是全屏100vh，可以调整isSliderInViewport的判断阈值适配你的布局
• 防抖的100ms时长可根据实际交互流畅度需求自行调整

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