Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
3 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 77

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

10.04.2025, 04:57. Показов 357. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Квантовые алгоритмы и обработка строк в Q#
EggHead 07.06.2025
Квантовые вычисления перевернули наше представление о том, как работать с данными, а Q# стал одним из ключевых языков для разработки квантовых алгоритмов. В традиционых системах мы оперируем битами —. . .
NUnit и C#
UnmanagedCoder 07.06.2025
В . NET существует несколько фреймворков для тестирования: MSTest (встроенный в Visual Studio), xUnit. net (более новый фреймворк) и, собственно, NUnit. Каждый имеет свои преимущества, но NUnit. . .
с++ Что нового?
russiannick 06.06.2025
Продолжаю обзор dev-cpp5. 11. Посмотрев на проекты, предоставленные нам для обучения, становится видно, что они разные по содержащимся файлам где: . dev обязательно присутствует . cpp/ . c один из них. . .
WebAssembly в Kubernetes
Mr. Docker 06.06.2025
WebAssembly изначально разрабатывался как бинарный формат инструкций для виртуальной машины, обеспечивающий высокую производительность в браузерах. Но потенциал технологии оказался гораздо шире - она. . .
Как создать первый микросервис на C# с ASP.NET Core, step by step
stackOverflow 06.06.2025
Если говорить простыми словами, микросервисная архитектура — это подход к разработке, при котором приложение строится как набор небольших, слабо связанных сервисов, каждый из которых отвечает за. . .
Рисование коллайдеров Box2D v2 на Three.js с помощью порта @box2d/core
8Observer8 06.06.2025
Используется порт Box2D v2 под названием @box2d/ core - пакет NPM. Загрузил документацию Box2D v2 на Netlify: https:/ / box2d-v2-docs. netlify. app/ Документацию Box2D v2 можно скачать с официального. . .
Как создать стек в Python
AI_Generated 05.06.2025
Как архитектор с более чем десятилетним опытом работы с Python, я неоднократно убеждался, что знание низкоуровневых механизмов работы стеков дает конкурентное преимущество при решении сложных задач. . . .
Server-Sent Events (SSE) в Node.js
run.dev 05.06.2025
Потоковая передача данных с сервера прямо в браузер стала повседневной потребностью - от биржевых графиков и спортивных трансляций до чатов и умных дашбордов. Много лет разработчики полагались на. . .
Создаем RESTful API на Golang с Fiber
golander 04.06.2025
Я перепробовал десятки фреймворков для создания RESTful API за последние годы, и когда впервые столкнулся с Fiber, понял, что это совсем другой уровень. Нет, я не собираюсь рассказывать сказки о. . .
Как работать с куки в ASP.NET Core
UnmanagedCoder 04.06.2025
Когда я впервые начал работать с куки в ASP. NET Core, меня поразило, насколько отличается работа с ними от классического ASP. NET. В Core все стало более декомпозированным - больше нет удобного. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
OSZAR »