如何利用指令修饰符 .passive 提升滚动性能？针对移动端开发教程

陆砚码

2026-09-29 • 👁 3人浏览过

必须在监听@scroll、@touchmove且不调用preventDefault()时添加.passive修饰符，如懒加载、吸顶判断；冲突场景需移除该修饰符，配合CSS优化滚动性能。在移动端开发中，给滚动容器（如

div

或

body

）绑定

scroll

、

touchmove

等事件时，浏览器默认会等待 JavaScript 执行完才继续滚动，导致卡顿。使用

.passive

修饰符可告诉浏览器：“这个事件处理器**永远不会调用

preventDefault()

**”，从而启用原生滚动加速，显著提升流畅度。什么时候必须加 .passive？以下场景建议强制添加：监听

@scroll

、

@touchmove

但仅做节流读取位置（如懒加载、吸顶判断），不阻止默认行为 Vue 中使用

v-on:touchmove.passive

替代原生

addEventListener

手动配置滚动区域嵌套（如弹窗内可滚动列表），父级滚动需保持响应性 Vue 中的正确写法（2.x / 3.x 通用）直接在指令后追加

.passive

，无需额外逻辑：

不能和 .passive 共存的情况以下操作与

.passive

冲突，必须移除修饰符或改用其他方案：需要阻止滚动（如模态框打开时禁止背景滚动）→ 改用

overflow: hidden

或动态设置

touch-action: none

自定义下拉刷新、拖拽排序 → 使用

.prevent

或原生

addEventListener

显式传

{ passive: false }

监听

mousewheel

（PC 端）→

.passive

无效，PC 滚轮无此限制配合 CSS 提升效果单靠

.passive

不够，还需优化渲染层：给滚动容器添加

will-change: scroll-position

（谨慎使用，仅对高频滚动区）避免在

scroll

回调中触发重排（如读取

offsetTop

后立即改样式），优先用

getBoundingClientRect()

requestAnimationFrame

移动端确保容器有明确高度和

overflow-y: auto

，避免触发全局

body

滚动

相关文章