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

1 ответ

Почему не работает следующий код, который вроде как скидывают везде где задают такие вопросы как у меня?

&lt;template&gt;   &lt;div     class="popup"     :style="{ transform: `translate(${scaleX}%, ${scaleY}%)` }"   &gt; Какое-то модальное окно при клике на предмет   &lt;/div&gt; &lt;/template&gt;

<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 &amp;&amp;         this.$el.getBoundingClientRect &amp;&amp;         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 &gt; window.innerWidth) this.scaleX = -100;         if (top + height &gt; window.innerHeight) this.scaleY = -100;       }     },   },   mounted() {     window.addEventListener("resize", this.onResize);     this.onResize();   },

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.

Дополнительно:

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

Niksak, почему бы тебе не сверить ширину и высоту ( если высота нужна тоже ) с блоком который равен 100% ширины окна просмотра ?

а даже не блок сверить а просто получить window.screen.width

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

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

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

Niksak, if(left < 0 || left > window.screen.width) { }

или мб так даж

if(left + width &lt; 0 || left &gt;  window.screen.width) { }

if(left + width < 0 || left > window.screen.width) { }

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

Niksak, знаешь что бы не парить мозги, скажу как было бы более адекватно сделать модалку

обёртку у модалки - кидаешь в боди а тело модалки, кидаешь в этот блок обёртку и - ровняешь относительно этого же блока в котором она находится, делаешь этот блок обёртку у модалки абсолютом, и у боди скрываешь скролл, и тогда не придётся делать какие-то вычисления о том, ушёл ли блок за пределы окна просмотра и т.д

Niksak, как ты её в боди кидать будешь - это я не знаю, в реакте есть порталы, в Vue - хз

szQocks,

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

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

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

Niksak, она не за пределами, лишь часть её, тогда в условии не нужно складывать ширину, просто проверять if(left < 0 || left > window.screen.width) { }

а хотя в твоём случае это проверка не поможет, у тебя там вообще стоит 370+ px left, хз как ты так сверстал её

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

Niksak, проблема в стилях наверное, вряд ли подскажу что-то, так как что бы точно ответить на твой вопрос, надо взглянуть то как она там в разметке в HTML появляется это окно + посмотреть стили, сам понимаешь - гемороя выше крыши, попроще вопросы задавай)

да и если на то пошло, раз ты разраб на vue, с модалкой должен на легаси разобраться чё уж...вряд ли сверхъестественная она

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

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

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

<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>

&lt;style lang="scss" scoped&gt; .menuInventoryItem {   &amp;.ordinary .popup::v-deep {     &amp;::before, &amp;::after {       background-color: rgba($color: #999999, $alpha: 1);     }     .popup-main__header-data &gt; p:first-child, .popup-main__header-title &gt; p:first-child {       color: rgba($color: #999999, $alpha: 1);     }        }   &amp;.rare .popup::v-deep {     &amp;::before, &amp;::after {       background-color: rgba($color: #5FBCFF, $alpha: 1);     }     .popup-main__header-data &gt; p:first-child, .popup-main__header-title &gt; p:first-child  {       color: rgba($color: #5FBCFF, $alpha: 1);     }   }   &amp;.epic .popup::v-deep {     &amp;::before, &amp;::after {       background-color: rgba($color: #A47AFD, $alpha: 1);     }     .popup-main__header-data &gt; p:first-child, .popup-main__header-title &gt; p:first-child {       color: rgba($color: #A47AFD, $alpha: 1);     }   }   &amp;.legendary .popup::v-deep {     &amp;::before, &amp;::after {       background-color: rgba($color: #E4D238, $alpha: 1);     }     .popup-main__header-data &gt; p:first-child, .popup-main__header-title &gt; 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%;   &amp;::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;   }   &amp;::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;   &amp;:first-child {     margin-top: 0;   }   &amp;:last-child {     margin-bottom: 0;   } } .popup-main__header-title {   &amp; &gt; p {     &amp;:first-child {       font-weight: 600;       font-size: 16rem;       color: rgba($color: #fff, $alpha: 1);       line-height: 14rem;       text-transform: uppercase;     }     &amp;:not(:first-child) {       font-size: 8rem;       color: rgba($color: #A5A5A5, $alpha: 1);       line-height: 11rem;     }   } } .popup-main__header-data {   &amp; &gt; p {     font-weight: 500;     text-align: end;     &amp;:first-child {       font-size: 14rem;       color: rgba($color: #d272ff, $alpha: 1);       line-height: 10rem;       text-transform: uppercase;     }     &amp;: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;   &amp;:first-child {     margin-top: 0;   }   &amp;:last-child {     margin-bottom: 0;   }   &amp; &gt; * {     margin-right: 10rem;     &amp;:last-child {       margin-right: 0;     }   } } .popupItem {   // flex-shrink: 0;   // flex-grow: 0;   width: 100%;      border-radius: 2rem;   &amp; &gt; 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;   &amp; &gt; img {     max-width: 100%;     max-height: 100%;     flex-shrink: 0;     flex-grow: 0;   } } .popupDescription {   padding: 5rem 0;   &amp; &gt; 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; } &lt;/style&gt;

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

szQocks,

Я отключил стиль zoom емае и она стала мелкой, в этом может быть причина?))) АХхпахах боже, чтоо.. Так она реально не выходит за пределы

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

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

Niksak, я тебя запомнил, шутник, что б я ещё раз ответил на твои вопросы - никогда!

действительно там есть стиль зум, мде

szQocks, это надо мной походу насяльника пошутил, я тут ни при чем)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Юрий Linux Ответ

Для отслеживания того, выходит ли блок за пределы окна браузера или нет, можно воспользоваться JavaScript. Существует несколько способов достичь этой функциональности, но одним из наиболее простых и эффективных является использование методов getBoundingClientRect() и window.innerHeight.

Пример кода на JavaScript:

// Получаем элемент, который хотим отслеживать
var element = document.getElementById('myElement');
 
// Получаем его размеры и позицию
var rect = element.getBoundingClientRect();
 
// Проверяем, выходит ли элемент за пределы окна браузера
if(rect.top  window.innerHeight) {
    console.log('Элемент вышел за пределы окна браузера');
} else {
    console.log('Элемент находится в пределах окна браузера');
}

// Получаем элемент, который хотим отслеживать var element = document.getElementById('myElement'); // Получаем его размеры и позицию var rect = element.getBoundingClientRect(); // Проверяем, выходит ли элемент за пределы окна браузера if(rect.top window.innerHeight) { console.log('Элемент вышел за пределы окна браузера'); } else { console.log('Элемент находится в пределах окна браузера'); }

В этом примере мы сначала получаем элемент, который хотим отслеживать, затем получаем его размеры и позицию относительно окна браузера с помощью метода getBoundingClientRect(). После этого мы проверяем, выходит ли верхняя или нижняя границы элемента за пределы высоты окна браузера (window.innerHeight). Если хотя бы одна из границ выходит за пределы, то выводим сообщение об этом.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

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

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно