打开Dialog时必须保留基本页面滚动

Question

Vuetify 的

v-dialog

当打开基本页面滚动时重置为顶部 如何防止基本页面滚动重置，以便在对话框打开时保持基本页面滚动。

示例：

有一个用Vue Framework构建的页面，使用的是Vuetify。 我向下滚动主页，最后有一个链接。 当我单击链接时，

v-model

打开，但问题是

v-dialog

打开时将基本页面滚动到顶部。

预期行为必须是对话框打开之前和之后基本页面的滚动位置必须相同

尝试过设置风格和一些 Vuetify 道具。

主要成分：

<template>
  <div>
    <!-- Table Component -->
    <table>
      <tr v-for="(item, index) in items" :key="index">
        <td>
          <a @click="openModal($event, item)">Open Modal</a>
        </td>
      </tr>
    </table>
    
    <!-- Modal Component -->
    <ModalComponent v-if="showModal" :position="modalPosition" @close="closeModal">
      <!-- Modal Content -->
    </ModalComponent>
  </div>
</template>

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

const items = [ /* Your table data */ ];
const showModal = ref(false);
const modalPosition = ref({ top: '0px', left: '0px' });

const openModal = (event, item) => {
  showModal.value = true;
  const rect = event.target.getBoundingClientRect();
  
  // Calculate the position relative to the viewport
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

  // Position the modal near the clicked element
  modalPosition.value = {
    top: `${rect.top + scrollTop}px`,
    left: `${rect.left + scrollLeft}px`,
  };
};

const closeModal = () => {
  showModal.value = false;
};
</script>

模态组件：

<template>
  <div class="modal" :style="{ top: position.top, left: position.left }">
    <button @click="$emit('close')">Close</button>
    <div class="modal-content">
      <!-- Modal Content -->
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  position: {
    type: Object,
    required: true,
  },
});
</script>

Answer 1

谢谢您的回复。 对我来说，当我打开模式时，我会捕获滚动位置，当模式关闭时，滚动回到保存的位置。

在 Vue3 中：-

const scrollPosition = ref(null);
// inside pop function where we are setting isModalVisible = true
scrollPosition.value = window.scrollY;
// inside closeModal function setting isModalVisible = false
nextTick(() => {
    window.scrollTo(0, scrollPosition.value);
  });