求助：NuxtUI Modal组件因滚动条切换产生抖动动画问题

问题原因 #

打开UModal时，组件默认会给页面添加overflow-hidden隐藏滚动条，页面宽度会减少滚动条的宽度（通常15-20px），导致Modal窗口随页面收缩向右偏移；关闭时滚动条恢复，页面宽度复原，Modal又向左偏移，产生抖动。

解决方案 #

方法1：禁用滚动条锁定（简单快捷，允许背景滚动） #

直接给UModal添加scroll-lock属性并设置为false，这样打开Modal时不会隐藏页面滚动条，也就不会触发宽度变化：

<UModal v-model="isOpen" :scroll-lock="false">
  <div class="flex justify-center items-center p-2">
    <img :src="selectedImage" alt="" />
  </div>
</UModal>

方法2：添加滚动条宽度补偿（保持背景锁定，无抖动） #

如果需要保持背景锁定（禁止页面滚动），可以通过CSS补偿滚动条宽度，避免页面宽度变化：

1. 计算滚动条宽度
   在客户端环境中计算滚动条宽度并设置CSS变量，可在页面的onMounted钩子或Nuxt插件中添加：

onMounted(() => {
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
  document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
});

2. 添加全局CSS补偿
   在项目的全局样式文件（如assets/css/main.css）中添加：

html.nuxt-ui-modal-open {
  padding-right: var(--scrollbar-width);
}

这样当Modal打开时，页面右侧会添加与滚动条宽度相等的内边距，抵消滚动条消失带来的宽度变化，Modal就不会偏移了。

方法3：自定义Modal的wrapper样式 #

通过NuxtUI的wrapper-class属性给Modal容器添加样式，强制Modal不受页面宽度变化影响：

<UModal v-model="isOpen" wrapper-class="fixed inset-0">
  <!-- Modal内容 -->
</UModal>

内容的提问来源于stack exchange，提问作者Rudee Sayuki