scroll-snap-type不能直接用于元素，必须写在显式可滚动的父容器上；不是直接子元素且受表格渲染机制干扰，无法响应scroll-snap-align，应改用模拟表格结构并严格控制尺寸与布局。

scroll-snap-type 不能直接用于 `

` 元素

表格本身不是滚动容器，scroll-snap-type 必须写在**显式可滚动的父容器**上，而不是 <table> 标签本身。浏览器对 <code><table> 的渲染逻辑（如自动 table-layout、匿名 box 生成）会破坏 scroll-snap 的父子关系——哪怕你给 <code><table> 加了 <code>overflow-y: scroll 和 height，子行（<tr>）也不会被识别为 snap 子项。 <p>常见错误现象：表格能滚动，但松手后不卡位、滑动“软绵绵”、或直接滚到底部。</p> <ul><li>不要把 <code>scroll-snap-type: y mandatory 写在 <table> 上 <li>不要指望 <code><tr> 能响应 <code>scroll-snap-align: start —— 它们不是滚动容器的直接子元素（中间还隔着 <tbody>） <li>避免用 <code>display: block 强制改变表格 display 类型，会导致边框塌陷、列宽错乱等不可控布局问题

正确做法：用 div 模拟表格结构 + scroll-snap 容器

想实现“表格翻页定位”，实际要的是**按行分页滚动**，而非真表格语义。推荐用语义中性、行为可控的 <div> 布局替代： <ul> <li>外层容器设 <code>height: 100vh、overflow-y: scroll、scroll-snap-type: y mandatory

每行用 <div class="row"> 表示，设 <code>height: 60px（或固定值）、scroll-snap-align: start

行内用 display: grid 或 display: flex 模拟列对齐，列宽用 grid-template-columns: 1fr 2fr 1fr 控制

禁用 touch-action: none；移动端垂直滚动需加 touch-action: pan-y

示例关键 CSS：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

.scroll-table {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.row {
  height: 60px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  border-bottom: 1px solid #eee;
}

为什么不用 tbody + tr 做 scroll-snap？

<tbody> 是表格的匿名盒容器，<code><tr> 在渲染树中不是 <code><tbody> 的直系子节点（中间有 table-row box），导致 <code>scroll-snap-align 失效。即使强行给 <tbody> 设 <code>scroll-snap-type，浏览器也忽略——它只认块级、可滚动、且子元素为标准盒模型的容器。

• <tr> 无法设置 <code>height（会被 table-layout 覆盖），scroll-snap-align 缺失锚点基准
• <tbody> 默认不产生滚动上下文，<code>overflow 对它无效
• Chrome/Firefox 中 <table> 内嵌滚动 + snap 组合常触发 layout thrashing，造成滑动卡顿 <h3>滚动精度与性能陷阱</h3> <p>表格翻页对齐精度比普通页面更高——用户常期望“某一行顶部刚好贴住容器顶部”。这要求所有尺寸严格可控：</p> <ul> <li>避免用 <code>% 或 em 定义行高，统一用 px 或 rem
• 禁用 line-height 过大导致行内容溢出，否则 scroll-snap-align: start 会以 content-box 为基准，视觉偏移
• 不要在 .row 里放 iframe、video 或复杂 SVG —— 它们会触发合成层切换，让 snap 动画掉帧
• 安卓 WebView 中若发现吸附延迟，加 scroll-snap-stop: always 到每个 .row，并改用 min-height: 60px + height: fit-content 组合防计算误差

真正难处理的是动态行高场景：如果某行内容换行导致高度变化，snap 位置就会漂移。这种情况下，别硬扛 scroll-snap，改用 IntersectionObserver + scrollTo() 主动对齐更可靠。