Vant Popup 弹出后怎么禁止背景滚动？

公孙巧玲提问于 2026-03-03 22:59:19 阅读 12

组件

我在用 Vant 的 Popup 组件时，发现弹窗打开后页面背景还能滚动，体验很不好。试过加 lock-scroll 属性，但好像没生效？

我的代码是这样的：

<van-popup v-model:show="showPopup" lock-scroll>
  <div>弹窗内容</div>
</van-popup>

我来解答赞 4 收藏

反馈

1 条解答

上官玉戈 Lv1

属性失效多半是样式层级或者 Vant 版本的坑，懒得排查原因的话，直接手动锁 body 最省事。监听弹窗的 open 和 close 事件，暴力控制 body 的 overflow 属性就行。

<van-popup v-model:show="showPopup" @open="lockScroll" @close="unlockScroll">

  <div>弹窗内容</div>

</van-popup>



<script setup>

const lockScroll = () => {

  document.body.style.overflow = 'hidden';

};

const unlockScroll = () => {

  document.body.style.overflow = 'auto';

};

</script>

2026-03-04 01:00