CSS Scroll Snap问题：动态插入内容触发滚动偏移如何解决？

我们在做滚动吸附列表时碰到个问题：给容器加了scroll-snap-type: x mandatory后，每次动态插入从服务器获取的元素，浏览器都会自动滚到某个随机元素的位置，没法保持在初始的第一个元素那里。把scroll-snap属性删掉的话，容器能正常停在初始位置，但滚动吸附的功能就没了。

复现代码 #

HTML

<main>
    <div class="pills">
      <div class="pill">1</div>
      <div class="pill">2</div>
    </div>
</main>

CSS

.pills {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow: auto;
    scroll-snap-type: x mandatory;
}

.pill {
    width: 120px;
    height: 40px;
    background: rgba(92, 138, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

JavaScript

const startingIdx = 3;
const batchSize = 10;
const delay = 500;
const root = document.querySelector('.pills');

const appendBatch = (from) => {
  for(let i = 0; i < batchSize; i++){
    const element = document.createElement('div');
    element.classList.add('pill');
    element.innerText = String(from + i);
    root.appendChild(element);
  }
} 

for(let i = 0; i < 3; i++){
  setTimeout(() => appendBatch(startingIdx + i*batchSize), i*delay);
}

问题原因 #

这是浏览器scroll-snap机制的默认行为：当容器内元素数量变化导致可滚动区域改变时，浏览器会自动触发scroll-snap的对齐逻辑，把最近的吸附点对齐到视口，就出现了自动滚动的情况。

解决方案 #

有两种靠谱的办法，都能保证添加元素后容器停在初始位置，同时保留滚动吸附功能：

方案一：添加元素后强制重置滚动位置

每次批量添加完元素，手动把容器的scrollLeft设为0，强制回到初始位置：

const startingIdx = 3;
const batchSize = 10;
const delay = 500;
const root = document.querySelector('.pills');

const appendBatch = (from) => {
  for(let i = 0; i < batchSize; i++){
    const element = document.createElement('div');
    element.classList.add('pill');
    element.innerText = String(from + i);
    root.appendChild(element);
  }
  // 添加完成后强制回到最左边
  root.scrollLeft = 0;
} 

for(let i = 0; i < 3; i++){
  setTimeout(() => appendBatch(startingIdx + i*batchSize), i*delay);
}

方案二：临时禁用scroll-snap，添加后恢复

这种方式能避免浏览器触发自动对齐逻辑，适合对滚动体验要求更高的场景：

const startingIdx = 3;
const batchSize = 10;
const delay = 500;
const root = document.querySelector('.pills');

const appendBatch = (from) => {
  // 临时关掉scroll-snap
  root.style.scrollSnapType = 'none';
  
  for(let i = 0; i < batchSize; i++){
    const element = document.createElement('div');
    element.classList.add('pill');
    element.innerText = String(from + i);
    root.appendChild(element);
  }
  
  // 重新开启scroll-snap
  root.style.scrollSnapType = 'x mandatory';
} 

for(let i = 0; i < 3; i++){
  setTimeout(() => appendBatch(startingIdx + i*batchSize), i*delay);
}

两种方案都能实现需求：不管加多少元素，容器始终停在第一个元素的位置，用户手动滚动时依然能正常触发滚动吸附。

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