(Vue.js) Прокрутка в модале также прокрутит заднюю часть модального - PullRequest
Новая
       57

(Vue.js) Прокрутка в модале также прокрутит заднюю часть модального

2 голосов
/ 25 сентября 2019

Нажатие на изображение вызывает длинную, прокручиваемую модал.Проблема в том, что если вы прокручиваете модальное окно, вы также прокручиваете заднюю часть модального окна.Как вы решаете это?

Модал является компонентом.Вот мой код:

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>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Большинство модальных пакетов решают эту проблему, применяя класс к тегу <body> при открытии модального окна.Например, <body class="modal-open">.Затем в CSS вашего приложения вы можете добавить это правило: 

body.modal-open {
  overflow: hidden;
}

Это позволит сделать так, чтобы страница за модалом больше не могла прокручиваться.

Какой бы модальный пакет вы ни использовали, скорее всего, запускаются события, когда модал открывается или закрывается.Вы можете применить этот класс к тегу <body> в обработчике open и удалить класс из тега <body> в обработчике close.

0 голосов
/ 25 сентября 2019

Я не вижу, как работает ваш конкретный код, но вы, как правило, можете это исправить, установив тело вашей страницы на «переполнение: скрытое», когда вы открываете модальное окно.Чтобы сделать его более элегантным, проверьте, есть ли на странице полосы прокрутки, и добавьте поле справа, чтобы предотвратить смещение содержимого.Я использовал это обнаружение полосы прокрутки в прошлом, но я бы сократил его до минимума, если бы использовал его сегодня ... Меня больше не волнует старый IE.

...