(Vue.js) 在模态中滚动也会滚动模态的背面

Question

点击图片会弹出一个长长的滚动模式。问题是，如果您在模态中滚动，也会滚动模态的背面。你是怎么解决的？

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

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>

Answer 1

我看不到您的具体代码运行，但您通常可以通过在打开模式时将页面主体设置为 "overflow:hidden" 来解决此问题。为了让它更优雅，检查页面是否有滚动条，并在右侧添加一些边距以防止内容移动。我过去用过 this scrollbar detection，但如果我今天用它，我会把它减少到最低限度...我不再关心旧的 IE。

Answer 2

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

body.modal-open {
  overflow: hidden;
}

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

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

更新

根据您添加的代码，您可以通过以下方式切换 <body> 标签上的 modal-open class：

...

<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 以供参考。

Answer 3

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

How to disable scrolling temporarily?

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

(Vue.js) 在模态中滚动也会滚动模态的背面

(Vue.js) Scrolling in the modal will also scroll the back of the modal

scroll

modal-dialog

popup

modalpopup

vue.js