如何阻止Vuetify的v-dialog打开时重置页面滚动位置

核心原因分析 #

• 标签默认行为：未设置有效href的<a>标签被点击时，浏览器会触发默认跳转逻辑，直接将页面滚动到顶部。
• Vuetify v-dialog默认机制：官方对话框组件打开时，可能会修改body的overflow属性或通过焦点管理逻辑，间接导致页面滚动位置变化。

解决方案 #

1. 彻底阻止标签的默认跳转 #

在点击事件中添加event.preventDefault()，从根源避免页面跳转触发的滚动重置：

const openModal = (event, item) => {
  // 阻止<a>标签的默认跳转行为
  event.preventDefault();
  showModal.value = true;
  const rect = event.target.getBoundingClientRect();
  
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

  modalPosition.value = {
    top: `${rect.top + scrollTop}px`,
    left: `${rect.left + scrollLeft}px`,
  };
};

或者直接替换标签为更语义化的元素（彻底规避默认行为）：

<span @click="openModal($event, item)" style="cursor: pointer; color: blue; text-decoration: underline;">Open Modal</span>

2. Vuetify官方v-dialog适配配置 #

如果实际使用的是Vuetify的v-dialog组件，添加以下配置稳定滚动位置：

<template>
  <v-dialog v-model="showModal" persistent>
    <!-- 对话框内容 -->
    <v-card>
      <v-card-title>示例对话框</v-card-title>
      <v-card-actions>
        <v-btn @click="closeModal">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
let scrollPosition = 0;

const openModal = (event) => {
  event.preventDefault();
  // 记录当前滚动位置
  scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
  // 恢复滚动位置
  window.scrollTo(0, scrollPosition);
};
</script>

• persistent属性：避免对话框关闭时自动重置页面状态
• 手动记录/恢复滚动位置：确保前后滚动状态完全一致

3. 自定义模态组件的样式优化 #

如果使用自定义模态，添加样式避免背景滚动干扰：

.modal {
  position: fixed;
  z-index: 9999;
  /* 其他布局样式 */
}

/* 打开模态时锁定背景滚动但保留位置 */
body.modal-open {
  position: fixed;
  width: 100%;
  top: calc(-1 * var(--scroll-position));
}

在打开/关闭模态时动态给body添加/移除modal-open类，并通过CSS变量传递滚动位置：

const openModal = (event, item) => {
  event.preventDefault();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 设置CSS变量
  document.documentElement.style.setProperty('--scroll-position', `${scrollTop}px`);
  document.body.classList.add('modal-open');
  showModal.value = true;
  // 其余位置计算逻辑...
};

const closeModal = () => {
  showModal.value = false;
  document.body.classList.remove('modal-open');
  // 恢复滚动位置
  const scrollTop = parseInt(document.documentElement.style.getPropertyValue('--scroll-position'));
  window.scrollTo(0, scrollTop);
};

验证步骤 #

1. 滚动到页面底部点击链接
2. 确认对话框正常打开，页面滚动位置无变化
3. 关闭对话框，滚动位置保持一致

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