Slick Slider所有滑块加载完成前如何禁止页面滚动

问题原因 #

现有逻辑存在两个漏洞导致异常：

• 未等待Slick滑块完成初始化就绑定了滚动监听，初始化阶段DOM节点位置计算存在偏差，会连续触发切页逻辑
• 滚动触发切页时未做动画状态拦截，scroll事件高频触发下会连续调用slickNext，直接把滑块切到最后一页，带动页面滚动到底部

具体实现步骤 #

• 初始化阶段先锁定页面滚动，等Slick触发init初始化完成事件后，再解除滚动锁定、开放切页逻辑
• 给切页逻辑加双状态校验：一是校验滑块是否完成初始化，二是校验滑块是否处于切页动画过程中，两个条件都满足时才响应滚动切页
• 切页前判断当前是否已经到最后一张滑块，到最后一页后不再响应滚动切页触发

修正后完整代码 #

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function() {
    // 初始化状态标记
    let isSliderReady = false;
    let isAnimating = false;

    jQuery(".wpostahs-slider-design-1 .wpostahs-slick-slider .slick-arrow").insertAfter("#arrowsShow");
    var $slider = $('.slider');
    var $progressBar = $('.progress');
    var $progressBarLabel = $( '.slider__label' );

    // 初始化前锁定页面滚动
    $('body').css('overflow', 'hidden');

    // 监听滑块初始化完成事件
    $slider.on('init', function(event, slick) {
      isSliderReady = true;
      // 初始化完成解除滚动锁定
      $('body').css('overflow', 'auto');
      // 初始化进度条状态
      $progressBar
        .css('background-size', '0% 100%')
        .attr('aria-valuenow', 0 );
      $progressBarLabel.text( '0% completed' );
    });

    $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      isAnimating = true;
      var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
      
      $progressBar
        .css('background-size', calc + '% 100%')
        .attr('aria-valuenow', calc );
      
      $progressBarLabel.text( calc + '% completed' );
    });

    $slider.on('afterChange', function(event, slick, currentSlide) {
      isAnimating = false;
    });
    
    $slider.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      speed: 1000,
      dots: false,
      fade: true, 
    });

    $(window).scroll(function () {
      // 未初始化完成/正在切页动画中，直接拦截逻辑
      if (!isSliderReady || isAnimating) return;

      var offset = $(".verticalSLider").offset().top;
      // 获取当前所在幻灯片索引
      var currentSlide = $slider.slick('slickCurrentSlide');
      var totalSlides = $slider.slick('getSlick').slideCount;

      // 滚动到触发位置、且当前不是最后一张时，才触发切下一页
      if ($(window).scrollTop() >= offset && currentSlide < totalSlides - 1) {
        $slider.slick('slickNext');
      }
    });
  });
</script>

补充说明：如果滑块内包含大量图片资源，建议先给图片设置固定宽高比占位，避免图片加载过程中DOM高度反复变化导致偏移量计算出错。

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