Vue intersectionobserver верхнее пересечение

@Radioaktiv · Регистрация: 09.10.2015

Студворк — интернет-сервис помощи студентам

как сделать отслеживание пересечения с шапкой и такое изменение в фиксированном блоке, как на Видео
мой код

шаблон вывода постов (посты подгружаю по одному)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <template>
      <div
        v-for="article in articles"
        :key="article.content.id"
        ref="articlesRef"
        :data-id="article.content.id">
        <ArticleContent :article="article" />
      </div>
    
      <LazyCommonLoader v-if="isPendingNextArticle" />
    
      <div
        ref="intersectionElement"
        class="my-6 text-center mx-0 lg:ml-[102px] lg:mr-[305px]">
        <div class="h-px"></div>
      </div>
    </template>

переменные

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    const articlesRef = ref();
    
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5,
      };
      const lastId = ref();
      const intersectionElement = ref();
      const intersectionObserver = ref<IntersectionObserver | null>(null);
      const intersectionObserverTop = ref<IntersectionObserver | null>(null);

инициализация observer для подгрузки новой статьи при скролле вниз

JavaScript
1
2
3
4
5
6
7
8
    onMounted(() => {
        intersectionObserver.value = new IntersectionObserver(
          handleIntersection,
          options
        );
    
        intersectionObserver.value.observe(intersectionElement.value);
      });

callback observer

JavaScript
1
2
3
4
5
6
7
     const handleIntersection = (entries: IntersectionObserverEntry[]) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                loadNextArticles();
              }
            });
          };

функция подгрузки статьи

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    const loadNextArticles = async () => {
        const lastArticle = articles.value[articles.value.length - 1];
    
        if (lastId.value === lastArticle.content.id) {
          return;
        }
    
        lastId.value = lastArticle.content.id;
    
        const response = await fetchNextArticle({
          articleId: lastId.value,
        });
    
        if (!response) {
          return;
        }
    
        articles.value.push({
          content: response,
        });
      };

теперь по вопросу
накидал watch для наблюдением и подпиской в observer новых статей

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     watch(
        () => articlesRef.value,
        () => {
          articlesRef.value.forEach((articleElement) => {
            intersectionObserverTop.value?.unobserve(articleElement);
          });
    
          articlesRef.value.forEach((articleElement) => {
            intersectionObserverTop.value.observe(articleElement);
          });
        },
        {
          deep: true,
        }
      );

инициализация второго observer

JavaScript
1
2
3
4
5
6
7
8
9
10
    onMounted(() => {
        intersectionObserverTop.value = new IntersectionObserver(
          handleIntersectionTop,
          {
            root: null,
            rootMargin: `0px`,
            threshold: 0,
          }
        );
      });

callback

JavaScript
1
2
3
4
5
6
7
    const handleIntersectionTop = (entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry, index) => {
          if (entry.boundingClientRect.top <=0) {
            console.log(entry.target);
          }
        });
      };

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

Новые блоги и статьи Все статьи Все блоги /
Создаем RESTful API на Golang с Fiber golander 04.06.2025 Я перепробовал десятки фреймворков для создания RESTful API за последние годы, и когда впервые столкнулся с Fiber, понял, что это совсем другой уровень. Нет, я не собираюсь рассказывать сказки о. . .	Как работать с куки в ASP.NET Core UnmanagedCoder 04.06.2025 Когда я впервые начал работать с куки в ASP. NET Core, меня поразило, насколько отличается работа с ними от классического ASP. NET. В Core все стало более декомпозированным - больше нет удобного. . .	Рисование коллайдеров физического движка Box2D-WASM v3 на Three.js 8Observer8 04.06.2025 Erin Catto (автор Box2D) переписал с нуля Box2D v2 с С++ на Си и появилась версия Box2D v3. Birch-san собрал Box2D v3 в WebAssembly (WASM), чтобы можно было использовать Box2D v3 на JavaScript. В. . .	Worker Threads и многопоточность в Node.js Reangularity 03.06.2025 Если вы когда-нибудь посещали собеседования на позицию Node. js разработчика, почти наверняка слышали заезженную фразу: "Node. js - однопоточная платформа". Звучит как неоспоримый факт, который. . .	Event-Driven CQRS на C# с паттерном Outbox stackOverflow 03.06.2025 В традиционной модели происходит примерно следующее: вы получаете команду, обрабатываете ее, сохраняете результат в базу данных и затем пытаетесь опубликовать событие в брокер сообщений. Но что если. . .
OwenLogic: перенос сетевых переменных в панель Weintek (EasyBuilder Pro) ФедосеевПавел 03.06.2025 ВВЕДЕНИЕ ПЕРЕД ЭКСПЕРИМЕНТАМИ - СОЗДАЙТЕ РЕЗЕРВНЫЕ КОПИИ ПРОЕКТОВ На момент написания статьи (02 июня 2025 г. ) самыми актуальными версиями ПО являются: OwenLogic v. 2. 10. 366 EasyBuilder Pro. . .	Dev-c++5.11 Покорение вершины russiannick 02.06.2025 С утра преследовала одна мысль - вот бы выучить С++. Сказано-сделано. Окончив смену, скачал в интернете бестселлер Дэвиса Dev-C++ для чайников. Книга оказалась интересной и я скачал среду, на примере. . .	Тестирование Pull Request в Kubernetes с GitHub Actions и GKE Mr. Docker 02.06.2025 Мы все знаем, что тестирование на локальной машине или в изолированном CI-окружении — это не совсем то же самое, что тестирование в реальном кластере Kubernetes. Контекстно-зависимые ошибки, проблемы. . .	Оптимизация CMake для ускорения сборки bytestream 02.06.2025 Вы когда-нибудь ловили себя на мысле, что пока ваш проект компилируется, можно успеть сварить кофе, прочитать главу книги или даже сбегать в соседний офис? Если да, то добро пожаловать в клуб. . .	JS String.prototype.localeCompare() mr_dramm 02.06.2025 скопировано из этой темы чтобы не потерялось. localeCompare без указания локали для сравнения строк под капотом использует Intl. Collator , который работает согласно Unicode Collation Algorithm. . .

Опции темы