如何在滚动到指定段落时修改Slick的slidesToScroll参数？

完全可以实现这个需求，不需要依赖data-slide属性，直接利用Intersection Observer检测目标段落的可见性，结合Slick官方提供的slickSetOption方法就能动态修改slidesToScroll参数。以下是具体实现方案：

核心思路 #

1. 用Intersection Observer监听第4个段落（id为four）的视口可见状态
2. 当该段落进入视口时，调用slickSetOption修改slidesToScroll为目标值
3. 若需要在段落离开视口时恢复初始设置，同样在回调中处理

修改后的完整代码 #

JavaScript

$(document).ready(function () {
    // 保存初始滚动步长，方便后续恢复
    const initialScrollStep = 3;
    const $slickNav = $('.container');
    
    // 初始化Slick组件
    $slickNav.slick({
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: initialScrollStep
    });

    // 配置Intersection Observer
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          const sectionId = entry.target.getAttribute('id');
          const targetLinks = document.querySelectorAll(`#action a[href="#${sectionId}"]`);

          // 处理导航链接的active状态
          if (entry.intersectionRatio > 0) {
            targetLinks.forEach(link => link.classList.add('active'));
            
            // 当第4个段落进入视口时，修改滚动步长
            if (sectionId === 'four') {
              $slickNav.slick('slickSetOption', 'slidesToScroll', 1, true);
            }
          } else {
            targetLinks.forEach(link => link.classList.remove('active'));
            
            // 当第4个段落离开视口时，恢复初始滚动步长（可选）
            if (sectionId === 'four') {
              $slickNav.slick('slickSetOption', 'slidesToScroll', initialScrollStep, true);
            }
          }
        });
      });

    // 监听所有带id的段落
    document.querySelectorAll('.table p[id]').forEach(section => {
      observer.observe(section);
    });
});

CSS

.active{
  color: red;
}

HTML

<!-- Slick Navigation -->
<div id="action" class="container">
  <a href="#one" data-slide="1">go to slide 1</a>
  <a href="#two">go to slide 2</a>
  <a href="#three">go to slide 3</a>
  <a href="#four" data-slide="4">go to slide 4</a>
  <a href="#five">go to slide 5</a>
  <a href="#six">go to slide 6</a>
  <a href="#seven">go to slide 7</a>
  <a href="#eight" data-slide="8">go to slide 8</a>
</div>

<div class="table">
  <p id="one" style="margin-bottom: 100%;">Hello</p>
  <p id="two" style="margin-bottom: 100%;">Hello 1</p>
  <p id="three" style="margin-bottom: 100%;">Hello 2</p>
  <p id="four" style="margin-bottom: 100%;">Hello 3</p>
  <p id="five" style="margin-bottom: 100%;">Hello 4</p>
  <p id="six" style="margin-bottom: 100px;">Hello 5</p>
  <p id="seven" style="margin-bottom: 100px;">Hello 6</p>
  <p id="eight" style="margin-bottom: 100px;">Hello 7</p>
</div>

关键说明 #

• slickSetOption是Slick官方提供的动态修改配置的方法，语法为：$(element).slick('slickSetOption', optionName, value, applyImmediately)，最后一个参数设为true会让新配置立即生效。
• 你提到的data-slide属性主要用于导航链接直接跳转至指定slide，和修改滚动步长的需求无关，无需依赖它来实现参数修改。
• 代码中保留了恢复初始滚动步长的逻辑，若不需要可以删除对应的else分支代码。

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