(Vue.js) 在模态中滚动也会滚动到模态的后面答案

【问题标题】：(Vue.js) Scrolling in the modal will also scroll the back of the modal(Vue.js) 在模态中滚动也会滚动到模态的后面
【发布时间】：2020-01-25 22:47:57
【问题描述】：

单击图像会打开一个长长的滚动模式。问题是，如果您在模态中滚动也会滚动模态的背面。你是怎么解决的？

模态是一个组件。这是我的代码：

Carousel.vue

<template>
  <div>
    <div v-for="(item, index) in photos" :key="index">
      <div @click="imgClick(item)" style="cursor:pointer;">
        <img :src="item.thumbnail" />
      </div>
      <Modal v-if='item.show' @close="item.show = false">
        <div slot='body'>
          <img :src="item.thumbnail" :class="`img-index--${index}`"/>
        </div>        
      </Modal>
    </div>
  </div>
</template>

<script>
import Modal from './Modal.vue'
export default {
  props: {
    items: { type: Array, default: () => [] }
  },
  data() {
    return {
      photos: {}
    }
  },
  created() {
    this.photos = this.items.map(item => {
      return { ...item, show: false }
    })
  },
  methods: {
    imgClick(item) {
      item.show = true
    }
  },
  components: {
    Modal: Modal
  }
}
</script>

【问题讨论】：

这可能是一个 CSS 问题，这里已经有了答案。 stackoverflow.com/questions/9538868/…
@skribe 我没有使用像 Bootstrap 这样的 CSS 库。感谢您的搜索。
@zoecode 看看下面我的回答，如果有帮助请告诉我。干杯！
@zoecode 如果我的回答对您有帮助，请点赞并将其标记为“已接受”，以便将来对其他用户有所帮助。谢谢！
@Vince 我不知道如何向添加类。我也不知道如何仅在模式打开时添加名为“modal-open”的类。我不太明白。抱歉回复晚了。

标签： vue.js scroll modal-dialog popup modalpopup

【解决方案1】：

大多数模态包通过在打开模态时将类应用于<body> 标记来解决此问题。例如，<body class="modal-open">。然后在你应用的 CSS 中，你可以添加这条规则：

body.modal-open {
  overflow: hidden;
}

这将使模态框后面的页面不再可滚动。

无论您使用哪个模态包，都可能在模态打开或关闭时触发事件。您可以将此类应用于open 事件处理程序中的<body> 标记，并从close 事件处理程序中的<body> 标记中删除该类。

更新

根据您添加的代码，以下是您可以在 <body> 标签上切换 modal-open 类的方法：

...

<div @click="showModal(item)" style="cursor:pointer;">
  <img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="hideModal(item)">
  <div slot='body'>
    <img :src="item.thumbnail" :class="`img-index--${index}`"/>
  </div>        
</Modal>

...

{
...

methods: {
  showModal(item) {
    item.show = true
    document.body.classList.add("modal-open");
  },
  hideModal(item) {
    item.show = false;
    document.body.classList.remove("modal-open");
  }
},

...
}

请参阅此jsFiddle 以供参考。

【讨论】：

这行得通，但如果滚动条影响布局（通常在使用非触摸鼠标时看到）它有一个巨大的缺点是网站的大小稍微变宽，所以一切都会改变。以某种方式防止滚动事件会更好。
@Trevor 这是一个非常罕见的极端情况，不适用于 2 多年前提出和回答的问题......你在使用什么浏览器来解决这个问题？因为它不是 Chrome 或 Firefox。它们的滚动条不会影响页面宽度。
公平地说，这是一个极端情况。我在使用最新版本的 Chrome 和 FF 的 macOS Big Sur 上看到了它。这取决于您使用的鼠标类型。如果您使用触控板、Apple 魔术鼠标或移动设备等触控鼠标，滚动条不会影响布局。但是使用普通的外接鼠标，滚动条会占用水平/垂直空间，如果你隐藏它们会扩大你网站的布局。查看css-tricks.com/prevent-page-scrolling-when-a-modal-is-open 的解决方案与您的解决方案类似，但也考虑了回流。

【解决方案2】：

我看不到您的特定代码正在运行，但您通常可以通过在打开模式时将页面正文设置为“溢出：隐藏”来解决此问题。为了使其更优雅，请检查页面是否有滚动条并在右侧添加一些边距以防止内容移位。我过去使用过this scrollbar detection，但如果我今天使用它，我会将它剥离到最低限度......我不再关心旧的IE。

【讨论】：

【解决方案3】：

您可以暂时禁用导致滚动的事件。

How to disable scrolling temporarily?

某些解决方案只是通过隐藏滚动条来禁用滚动（body 元素上的overflow: hidden;），但此解决方案的好处是，如果滚动条的样式被设置为影响布局，则背景内容不会移动，大多数浏览器都会这样做如果您使用的是非触控鼠标。

【讨论】：