如何在Embla中添加幻灯片且不改变当前显示页面

核心问题 #

1. 幻灯片筛选错误：获取幻灯片时包含了非.embla__slide的子节点（如文本节点），导致插入位置计算偏差。
2. startIndex维护逻辑混乱：盲目递增startIndex，未考虑插入位置与当前显示索引的关系，导致索引重置或偏移。
3. 错误使用reInit：每次添加幻灯片后调用reInit会重置Embla实例，丢失原有状态，应使用refresh更新布局。
4. 初始startIndex未匹配起始章节：从第9章开始时，未将startIndex设置为对应章节首页面的位置。

修复步骤 #

1. 正确筛选幻灯片元素 #

修改幻灯片获取逻辑，只选择类名为.embla__slide的有效元素：

// 替换原幻灯片获取代码
var slides = Array.from(embla.containerNode().querySelectorAll('.embla__slide'));

2. 修复startIndex维护逻辑 #

仅当插入位置在当前startIndex之前或等于当前startIndex时，才递增startIndex（插入的幻灯片会将后续元素索引后移）：

// 替换原插入后的startIndex处理逻辑
if (index === -1) {
  embla.containerNode().appendChild(newSlide);
  // 初始状态下，设置startIndex为第一个幻灯片的索引
  if (slides.length === 0) {
    startIndex = 0;
  }
} else {
  embla.containerNode().insertBefore(newSlide, slides[index]);
  // 仅插入位置在当前索引之前/相等时，更新startIndex
  if (startIndex >= index) {
    startIndex++;
  }
}

3. 用refresh替代reInit #

reInit会重置Embla实例，改用refresh更新布局并保留状态，再手动滚动到目标索引：

// 替换原embla.reInit(...)代码
embla.refresh();
embla.scrollTo(startIndex);

4. 初始化startIndex匹配起始章节 #

从第9章开始时，将startIndex初始化为0（若第一个添加的是第9章首页面），确保起始显示正确：

// 全局初始化startIndex，根据起始章节调整
let startIndex = 0;

完整修复后的addSlide函数 #

let startIndex = 0;
let isScrolling = false;

function addSlide(content) {
  if (isScrolling) {
    setTimeout(() => addSlide(content), 300);
    return;
  }

  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;
  const contentDiv = tempDiv.firstChild;

  const chapterNumber = Number(contentDiv.getAttribute('chapter-number'));
  const pageIndex = Number(contentDiv.id.split('-').pop());

  const newSlide = document.createElement('div');
  newSlide.className = 'embla__slide';
  newSlide.appendChild(contentDiv);

  // 仅筛选有效的embla幻灯片
  const slides = Array.from(embla.containerNode().querySelectorAll('.embla__slide'));
  let insertIndex = -1;

  for (let i = 0; i < slides.length; i++) {
    const slideContent = slides[i].firstChild;
    const existingChapter = Number(slideContent.getAttribute('chapter-number'));
    const existingPage = Number(slideContent.id.split('-').pop());

    if (chapterNumber < existingChapter || (chapterNumber === existingChapter && pageIndex < existingPage)) {
      insertIndex = i;
      break;
    }
  }

  if (insertIndex === -1) {
    embla.containerNode().appendChild(newSlide);
    if (slides.length === 0) {
      startIndex = 0;
    }
  } else {
    embla.containerNode().insertBefore(newSlide, slides[insertIndex]);
    if (startIndex >= insertIndex) {
      startIndex++;
    }
  }

  console.log('Current selected index:', startIndex);

  embla.refresh();
  embla.scrollTo(startIndex);
}

额外优化 #

确保isScrolling能准确监听Embla状态：

embla.on('scroll', () => {
  isScrolling = !embla.canScroll();
});
embla.on('pointerDown', () => {
  isScrolling = true;
});
embla.on('pointerUp', () => {
  isScrolling = false;
});

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