-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202

Наблюдение за элементом

10.04.2025, 04:57. Показов 1031. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fillUntilLastTooFar(k, t) {
   //Останавливаем рекурсивное выполнение 
   if(window.innerHeight - t?.lastElementChild?.getBoundingClientRect().bottom < -200)
       return;
 
    //Добавляем 15 карточек
    for (let is = 0; is < 15; is++)
    t.appendChild(createArticleCard(false, t?.childElementCount));
 
    //Рекурсивно повторяем, останавливаем если последняя карточка ниже -200px от нижнего края
    fillUntilLastTooFar(k, t);
 
    return;
}
Трудность в том, что это работает только относительно окна браузера. Что если необходимо наблюдать за элементом, который в блоке, а блок расположен по центру экрана. Есть отступы по краям от экрана, окна браузера.

Хороший вариант использовать IntersectionObserver.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
                
         // Когда элемент пересекает нижнюю границу (с расстоянием менее 200px)
         if (entry.isIntersecting) {
            console.log('Элемент находится менее чем 200px от нижней границы экрана!');
            // Останавливаем наблюдение за этим элементом
            observer.unobserve(entry.target);
  
        }
    });
}, {
    root: null, // Работает относительно окна (viewport)
    rootMargin: '200px 0px 0px 0px', // Внимание! Сдвигаем нижнюю границу на 200px
    threshold: 0 // Срабатывает, когда элемент хотя бы немного появляется в области видимости
});

Не понимаю как лучше выполнить.
- Сперва необходимо заполнить весь блок карточками, так чтобы последний элемент находил ниже -200px от нижней границы блока.
- Затем запрос не сервер, сбрасываем наблюдение за элементом.
- Получили массив, заполнили карточки, повесили наблюдение на последний элемент.
- И по новой, сразу запрос на сервре, получили данные, добавили карточки.


Собственно как это выполнить лучше, голова кругом. Еще функции создавать? Возможно все это выполнить сразу в IntersectionObserve?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
10.04.2025, 04:57
Ответы с готовыми решениями:

Наблюдение: getBoundingClientRect иногда возвращает в свойствах нецелый long
Приходится: const GetRect = function(ElementId){ let Element =...

Является ли s-й элемент положительным числом и является ли k-й элемент четным числом, а так же какой элемент больше
Дан массив целых чисел. Выяснить: а) является ли s-й элемент массива положительным числом; б)...

Получить индекс элемента одномерного массива, если известно значение элемента (без цикла)?
Получить индекс элемента одномерного массива, если известно значение элемента (без цикла)? То...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
10.04.2025, 04:57
Помогаю со студенческими работами здесь

Как присвоить переменной id элемента и затем изменить класс этого элемента
подскажите пожалуста, как по слику присвоить переменной id элемента (в моем случае элемент&lt;td&gt;) и...

Перемещение на указанную позицию. на любой элемент элемент html
Люди подскажите возможно ли а если возможно то как реализовать перемещение на любую позицию в нтмл...

из двух заданных массивов А (10) и В (10) создать массив С так,чтобы элементы А стояли на четных местах, а элементы В - на нечетных местах массива С
Составить алгоритм и программу для создания массива из двух заданных массивов А (10) и В (10) так,...

Составить алгоритм определения суммы минимального элемента и первого элемента массива от 1 до 5 на HTML
Составить алгоритм определения суммы минимального элемента и первого элемента массива от 1 до 5 на...

Сколько соответствующих элементов двух последовательностей с одинаковым количеством элементов совпадают?
8. Сколько соответствующих элементов двух последовательностей с одинаковым количеством элементов...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

Новые блоги и статьи
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определенном условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru