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

То есть она имеет position absolute ( менять не помогает ) и находится внутри контейнера - т.е. внутри ячейки предмета по которому кликнули, именно так она рядом с ним и появляется емае.

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

szQocks, Опишу:
Модалка открывается простым кликом, который меняет модель isVisible на !isVisible. Модалка отображается по условию v-if='isVisible'. Все.
Эта модалка открывается по клику на один из многих предметов. Т.е. как инвентарь.

Код модалки вот)

<template>
  <div
    ref='popup'
    class="popup"
    :style="{ transform: `translate(${scaleX}%, ${scaleY}%)` }"
  >
    <div class="popup-main">
      <div class="popup-main__header">
        <div class="popup-main__header-title">
          <p>{{ item.source.title }}</p>
          <p>{{ item.source.weight }} КГ</p>
        </div>
        <div class="popup-main__header-data">
          <p>{{ $t(`inventory.rarity.${item.source.rarity}`) }}</p>
          <p>{{item.source.isQuestItem ? 'Квестовый' : 'Стандартный'}}</p>
        </div>
      </div>
      <div class="popup-main__content">
        <div class="popupItem">
          <div class="popupItem-image">
            <img
              :src="
                $_getImage(
                  `images/menu/inventory/items/${item.source.imageName}`
                )
              "
              alt="Image"
            />
          </div>
        </div>
        <div class="popupDescription">
          <p>
            {{ item.dynamicDescription || item.source.description }}
          </p>
          <div class="popupDescription-stickers"></div>
        </div>
      </div>
      <div class="popup-main__footer">
        <div class="item-effects" v-if="item.source.effectList">
          <h5 class="item-effects__title">Эффекты предмета</h5>
          <item-effect v-for="effect in item.source.effectList" :key="effect.id" :effect="effect" />
        </div>
        <popup-weapon :weapon="item.source.weaponCharacteristics"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.menuInventoryItem {
  &.ordinary .popup::v-deep {
    &::before, &::after {
      background-color: rgba($color: #999999, $alpha: 1);
    }
    .popup-main__header-data > p:first-child, .popup-main__header-title > p:first-child {
      color: rgba($color: #999999, $alpha: 1);
    }
    
  }
  &.rare .popup::v-deep {
    &::before, &::after {
      background-color: rgba($color: #5FBCFF, $alpha: 1);
    }
    .popup-main__header-data > p:first-child, .popup-main__header-title > p:first-child  {
      color: rgba($color: #5FBCFF, $alpha: 1);
    }
  }
  &.epic .popup::v-deep {
    &::before, &::after {
      background-color: rgba($color: #A47AFD, $alpha: 1);
    }
    .popup-main__header-data > p:first-child, .popup-main__header-title > p:first-child {
      color: rgba($color: #A47AFD, $alpha: 1);
    }
  }
  &.legendary .popup::v-deep {
    &::before, &::after {
      background-color: rgba($color: #E4D238, $alpha: 1);
    }
    .popup-main__header-data > p:first-child, .popup-main__header-title > p:first-child {
      color: rgba($color: #E4D238, $alpha: 1);
    }
  }
}

.popup {
  position: absolute;
  min-width: 290rem;
  zoom: 1.8;
  z-index: 15;
  width: 250rem;
  left: 50%;
  top: 50%;
  &::before {
    content: '';
    display: block;
    background: rgba(128, 128, 128, 0.4);
    width: 95%;
    height: 1px;
    position: absolute;
    left:0;
    right: 0;
    margin:0 auto;
    top:0;
    z-index: 1;
  }
  &::after{
    content: '';
    display: block;
    background: rgba(128, 128, 128, 0.4);
    width: 95%;
    height: 1px;
    position: absolute;
    left:0;
    right: 0;
    margin:0 auto;
    bottom:0;
  }
  font-family: "Gilroy";
}
.popup-main {
  background: rgba(0, 0, 0, 0.5);
  padding: 10rem;
  border-radius: 2rem;
  border-top:1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative;

}
.popup-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5rem 0;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.popup-main__header-title {
  & > p {
    &:first-child {
      font-weight: 600;
      font-size: 16rem;
      color: rgba($color: #fff, $alpha: 1);
      line-height: 14rem;
      text-transform: uppercase;
    }
    &:not(:first-child) {
      font-size: 8rem;
      color: rgba($color: #A5A5A5, $alpha: 1);
      line-height: 11rem;
    }
  }
}
.popup-main__header-data {
  & > p {
    font-weight: 500;
    text-align: end;
    &:first-child {
      font-size: 14rem;
      color: rgba($color: #d272ff, $alpha: 1);
      line-height: 10rem;
      text-transform: uppercase;
    }
    &:not(:first-child) {
      font-size: 9rem;
      color: rgba($color: #A5A5A5, $alpha: 1);
    }
  }
}
.popup-main__content {
  //display: flex;
  padding-bottom: 8rem;
  /* prettier-ignore */
  border: solid rgba($color: #FFFFFF, $alpha: 0.1);
  border-width: 1rem 0 1rem 0;
  margin: 5rem 0;
  padding: 5rem 0 0 0;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
  & > * {
    margin-right: 10rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
.popupItem {
  // flex-shrink: 0;
  // flex-grow: 0;
  width: 100%;
  
  border-radius: 2rem;
  & > p {
    font-weight: 500;
    font-size: 0.811vmin;
    line-height: 1.389vmin;
    color: white;
    text-align: end;
  }
}
.popupItem-image {
  width: 270rem;
  height: 70rem;
  display: flex;
  align-items: center;
  justify-content: center;
  & > img {
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
    flex-grow: 0;
  }
}
.popupDescription {
  padding: 5rem 0;
  & > p {
    text-align: center;
    font-weight: 500;
    font-size: 10rem;
    color: rgba($color: #A5A5A5, $alpha: 1);
  }
}

.item-effects__title{
  font-size: 12rem;
  color:#fff;
  font-weight: 400;
  text-transform: uppercase;
  margin-top:10px;
  margin-bottom: 5px;
}
</style>

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

szQocks, эта проверка не помогла, но в чем проблема? Верстал не я, в проект вошел))

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

szQocks,
Смотри, четко видно что модалка за пределами области видимости, в консоли даже вывел координаты, ширину, высоту и т.д. Также ниже есть еще и цифры - высота и ширина браузера ( в таком порядке ).

И при этом все эти формулы, x, y, y+height, x + width не выполняют условие "больше чем ширина/высота окна"

НО ВИДНО же как модалка скрывается емае, как так то а?

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

szQocks, то что это все не работает может быть связано с тем что модалка имеет position:absolute?

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

szQocks, checkPopupPosition это тот же метод onResize, переименованный*

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

szQocks, вот еще в чем прикол, объяснишь почему вот такая вариация работает?

Но проблема в том что блок начинает туда сюда скакать, т.е. он скрыт за пределами - возвращается на место стилями, потом обратно за пределы и так бесконечный цикл

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

Я кнчн этот код в разных вариациях переписывал, но логика одна и оно не робит)

Как сделать поочередное заполнение блоков?

0xD34F, и по твоему коду у меня небольшие вопросы)
https://play.vuejs.org/#eNp9VMFu2zAM/RXCWNF2qJN0XS...
Я немного изменил под свои нужды ( т.е. мне нужно чтобы кружка было 4 но уже значения были от 1 до 50 допустим, что я и указал в max ). Но кружки начинают заполняться одновременно, вот какие у меня обычно проблемы с такими индикаторами

Как сделать поочередное заполнение блоков?

Сергей delphinpro, аа даже так емае, спасибо

Как сделать поочередное заполнение блоков?

Ну если макс. урон может быть 100 а указано что 40 то тут явно не 40%)

Как сделать поочередное заполнение блоков?

Но считает оно что-то не очень. Т.е. вот скрин - урон, допустим, 40. Максимальный урон может быть 100.
Получается что полоска слишком далеко зашла а должна быть как на скрине

Всплывающеий блок при наведении мышки, hover, как заменить на клик?

Lol

Написал плеер на Vue но его интерфейс не кликабилен в браузере Сафари, какие причины?

Максим, деталька не подходит, купи детальку под свою мазду)
Но мне хочется узнать какие у Сафари особенности которые могут отвергнуть простой код

Почему у svg элемента белое лишнее белое пространство?

Overlord934,
Даа, вот я и сделал ховер) Изменил бэкграунд.
А честно, хз как исправить, будто это косяк иконки что-ли. Должен по идее закраситься весь круг но почему-то место между двумя концами этой стрелки как-будто отдельным считается и не краситься.
Т.е. тебе нужно чтобы весь круг был красным получается

Почему у svg элемента белое лишнее белое пространство?

Overlord934, Так ты ховер делаешь на стрелку, цвет ховера сливается со цветом текста и выглядит будто место между концами угла осталось белым

Почему у svg элемента белое лишнее белое пространство?

Запустил твой svg код:

Проблем нема

Каким образом реализовать дробление таймлайна на эпизоды как на ютубе?

Сергей delphinpro, надо же еще как-то сделать чтобы когда человек смотрит видос и таймлайн еще в самом начале видео и по мере его продвижения, когда линия пересекает конец одного эпизода и начало следующего эпизода нужно чтобы линия отступала, дробилась так сказать как-то)

Каким образом реализовать дробление таймлайна на эпизоды как на ютубе?

Мне кажется, что у меня изначально неправильная структура при которой это не реализовать?

Каким образом реализовать дробление таймлайна на эпизоды как на ютубе?

То есть конечно еще необходимо чтобы если эпизодов нет то была просто прямая полоса, без разделений, каким образом, дайте хоть наводку)