@Niksak

Как отследить, вышел ли блок за пределы окна браузера или нет?

Почему не работает следующий код, который вроде как скидывают везде где задают такие вопросы как у меня?
<template>
  <div
    class="popup"
    :style="{ transform: `translate(${scaleX}%, ${scaleY}%)` }"
  >
Какое-то модальное окно при клике на предмет
  </div>
</template>


Код ниже - это методы vue компонента:
data() {
    return {
      scaleX: 0,
      scaleY: 0,
    };
  },
  methods: {
    onResize() {
      console.log(this.$el);
      if (
        this.$el &&
        this.$el.getBoundingClientRect &&
        typeof this.$el.getBoundingClientRect == "function"
      ) {
        const boundingRect = this.$el.getBoundingClientRect();
        const { left, top, width, height } = boundingRect;
        console.log(boundingRect, top + height, window.innerHeight);
        if (left + width > window.innerWidth) this.scaleX = -100;
        if (top + height > window.innerHeight) this.scaleY = -100;
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.onResize();
  },


Т.е. мы просто как и везде определяем, является ли координата x ( или y ) + шириа ( или высота ) больше чем ширина/высота окна браузера и если да - то просто передвигаем модалку.

Почему это не работает? Т.е. даже если вывести true или false в консоли, т.е. что возвращает условие - оно вернет false.
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы