Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Определение расстояние от края браузера и элемента (https://javascript.ru/forum/dom-window/83074-opredelenie-rasstoyanie-ot-kraya-brauzera-i-ehlementa.html)

Сергей Ракипов 09.09.2021 07:01

Цитата:

Сообщение от рони (Сообщение 540091)
Сергей Ракипов,
изменяемый параметр лучше проверять перед условием!

Что то вот это не понял это как?

с переносом строки все понятно

const tsifra_1 = document.querySelector(".tsifra_1");

let anim1 = () => {
    const windowInnerWidth = document.documentElement.clientWidth
    if(windowInnerWidth >= 800){
    let ikonka1 = tsifra_1.getBoundingClientRect();
    tsifra_1.classList.toggle( "tsifra_1_1", ikonka1.top <= 500 );
    }
    else if(windowInnerWidth <= 800){
        let ikonka1 = tsifra_1.getBoundingClientRect();
        tsifra_1.classList.toggle( "tsifra_1_1", ikonka1.top <= 100 );
        }
    console.log(windowInnerWidth);
};
window.addEventListener( "scroll", anim1);
anim1();

рони 09.09.2021 07:15

Сергей Ракипов,
windowInnerWidth --- ширину экрана можно изменить, поэтому использовать значение измеренное один раз, может дать неверный результат, лучше использовать текущее значение, а не то, которое было при загрузке страницы.

Сергей Ракипов 09.09.2021 08:11

Цитата:

Сообщение от рони (Сообщение 540129)
Сергей Ракипов,
windowInnerWidth --- ширину экрана можно изменить, поэтому использовать значение измеренное один раз, может дать неверный результат, лучше использовать текущее значение, а не то, которое было при загрузке страницы.

А понял вот о чем речь то есть нужно отслеживать событие ресайз?

рони 09.09.2021 09:05

Цитата:

Сообщение от Сергей Ракипов
А понял вот о чем речь то есть нужно отслеживать событие ресайз?

???
в anim1 надо измерять и да назначить эту функцию на события, и resize и scroll

Сергей Ракипов 09.09.2021 09:16

Цитата:

Сообщение от рони (Сообщение 540135)
???
в anim1 надо измерять и да назначить эту функцию на события, и resize и scroll


Ну то есть в anim1 нужно повесить два события, а разве так можно что на одну функцию вещать два события resize и scroll

рони 09.09.2021 09:56

Цитата:

Сообщение от Сергей Ракипов
Ну то есть в anim1 нужно повесить два события,

...
const tsifra_1 = document.querySelector(".tsifra_1");

        let anim1 = () => {
            const windowInnerWidth = document.documentElement.clientWidth
            if (windowInnerWidth >= 800) {
                let ikonka1 = tsifra_1.getBoundingClientRect();
                tsifra_1.classList.toggle("tsifra_1_1", ikonka1.top <= 500);
            } else if (windowInnerWidth <= 800) {
                let ikonka1 = tsifra_1.getBoundingClientRect();
                tsifra_1.classList.toggle("tsifra_1_1", ikonka1.top <= 100);
            }
            console.log(windowInnerWidth);
        };
        window.addEventListener("scroll", anim1); //запуск во время прокрутки
        window.addEventListener("resize", anim1); //запуск при изменении размеров окна
        anim1(); //запуск при формировании страницы(загрузка)

Сергей Ракипов 09.09.2021 10:22

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

window.addEventListener("scroll", "resize", anim1);


А так спасибо.
И тут больше вопрос из любопытство, а когда вот это "resize" вешаешь это не сильно загружает страницу браузера?

Сергей Ракипов 09.09.2021 10:45

А интересно вместо пикселей можно сделать проценты?

рони 09.09.2021 11:06

Цитата:

Сообщение от Сергей Ракипов
а когда вот это "resize" вешаешь это не сильно загружает страницу браузера?

раз в 100 меньше чем scroll
Цитата:

Сообщение от Сергей Ракипов
А интересно вместо пикселей можно сделать проценты?

можно если использовать IntersectionObserver параметр threshold

Сергей Ракипов 09.09.2021 11:18

Цитата:

Сообщение от рони (Сообщение 540152)
раз в 100 меньше чем scroll

Звучит очень логично.


Часовой пояс GMT +3, время: 03:57.