移动端滚动卡顿怎么优化？

爱学习的乐萱提问于 2026-03-17 09:41:19 阅读 15

优化

我在做一个移动端的长列表页面，用的是普通的 div 滚动，但一滚动就特别卡，尤其在低端安卓机上。

试过加 transform: translateZ(0) 和 will-change: scroll-position，但效果不明显。也用了 passive 事件监听，还是不行。

是不是应该用 CSS 的 overflow: auto 配合硬件加速？或者得上虚拟滚动？现在结构大概这样：

<div class="scroll-container">
  <div class="item" v-for="n in 1000" :key="n">{{ n }}</div>
</div>

有没有更轻量又有效的方案？

我来解答赞 5 收藏

反馈

1 条解答

FSD-红静 Lv1

1000个DOM节点堆在那里，再怎么优化CSS都没用。

轻量方案：CSS containment + 原生滚动

.scroll-container {

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  contain: strict;

  height: 100vh;

}



.item {

  contain: layout;

}

contain: strict 能把重排范围限制在容器内，配合 -webkit-overflow-scrolling: touch 启用iOS原生惯性滚动，安卓端会流畅很多。

如果还卡，那就得上虚拟滚动了，这才是根本解决方案。1000个节点全部渲染本身就是问题，虚拟滚动只渲染可见区域+缓冲的那二三十个，对低端机才是正解。

用 vue-virtual-scroller 也就是加个组件的事，两行代码搞定：

别跟CSS较劲了，DOM数量才是瓶颈。

2026-03-17 14:02