COMPONENT 79 · Motion & Interaction

滚动吸附

Scroll Snap

也叫Paging ScrollSnap Scrolling滚动分页

滚动结束时把视口对齐到最近的项目或章节。

Aligns the viewport to the nearest item or section after scrolling.

ANATOMY & USAGE

结构与使用建议

组成部分

滚动容器
吸附项目
对齐位置

适合使用

触屏浏览同尺寸卡片或幻灯片，需要稳定对齐时。

不建议使用

内容尺寸不一、用户需要自由精细滚动时。

键盘与无障碍

不要捕获正常键盘滚动；焦点项目保持可见，并尊重减少动态偏好。

DESCRIBE IT TO AI

这样告诉编程助手

实现滚动吸附（Scroll Snap）：滚动结束时把视口对齐到最近的项目或章节。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack" aria-label="滚动吸附">
  <div class="viewport" tabindex="0">
    <article>项目 1</article>
    <article>项目 2</article>
    <article>项目 3</article>
  </div>
  <button type="button">加载更多</button>
</section>