Intersection Observer를 사용하여 HTML 요소의 위치 변화 관찰-JS 튜토리얼-php.cn

Intersection Observer를 사용하여 HTML 요소의 위치 변화 관찰

Barbara Streisand

풀어 주다： 2025-01-12 18:28:43

원래의

598명이 탐색했습니다.

Observing position-change of HTML elements using Intersection Observer

TLDR: 스크롤 이벤트나 지속적인 폴링을 수신하지 않고 교차 관찰자를 사용하여 요소의 위치 변경을 관찰합니다.

데모:

https://ajk-essential.github.io/Position-Observer/

Github 저장소:

https://github.com/AJK-Essential/Position-Observer

동기 부여:

전통적으로 요소가 뷰포트 내에서 이동할 때 관찰하려면 HTML 요소의 상위 요소에 대한 스크롤 이벤트를 수신하거나 requestanimationframe 사용과 같은 지속적인 폴링 방법을 사용해야 했습니다.

이렇게 하면 됩니다… 하지만 더 좋을 수도 있습니다…

스크롤 이벤트를 수신하면 성능이 지연될 수 있으므로
그리고 연속 폴링은 항상 백그라운드에서 실행됩니다. 이는 대상 요소가 움직이지 않을 때에도 CPU에 부하를 줄 수 있습니다.

이것은 Intersection Observer를 사용하여 html 요소의 위치 변경을 관찰할 수 있는지 알아보기 위한 접근 방식/실험입니다.

접근 방식:

교차점 관찰자는 대상 요소가 실제로 루트 요소와 교차하는지 보고하는 데 매우 능숙합니다. 대상 요소가 이동할 때 발생하는 대상 요소와 루트 요소 사이의 교차 부분 변화를 보고할 수 있습니다.

또한 rootBounds의 여백을 수정하여 캡처 창(rootbounds)의 크기를 변경할 수 있는 기능도 있습니다.

흠...

아이디어:

그래서 캡처 창을 사용하여 대상을 단단히 감싸는 아이디어입니다. 즉, 대상 요소가 움직일 때 캡처 창에 부딪혀 교차하므로 교차점 관찰자는 높은 임계값 배열(1/1000분할로 0에서 1까지)을 사용하여 미세한 교차점을 보고합니다. 즉, Intersection Observer는 대상과 루트 사이의 교차 영역 변화를 1/1000마다 보고합니다(캡처 창)

캡처 창 밖으로 완전히 이동하면(교차 비율이 0일 때 발생) 루트(캡처 창)의 여백을 새 대상 위치 주위로 다시 변경합니다.

내가 직면한 구현 문제와 현재 해결 방법:

타겟이 시각적 뷰포트 크기(화면 내) 내에 있지만 스크롤 컨텍스트에 숨겨져 시각적으로 숨겨지는 스크롤 상황이 발생할 때까지는 이 접근 방식이 잘 작동했습니다.

이 시나리오에서는 교차로가 대상이 시각적 영역 내에 있을 때만 보고되므로 교차 비율은 항상 0이었습니다.

그래서 이 문제를 해결하기 위해 제가 취한 접근 방식은 다음과 같습니다.

교차율이 0으로 보고되면…
교차로 관찰자의 연결이 끊어졌다가 새로운 설정으로 다시 연결됩니다:

캡처 창 크기는 전체 화면으로 만들어집니다(즉, 루트 여백이 0임).

그리고 이 시나리오에 대한 콜백은 루트 경계가 시각적 뷰포트인 순간과 대상 바로 주위에 있는 순간을 구별하기 위해 다른 방법으로 이루어집니다.

따라서 Intersection Observer가 이제 1보다 작은 교차 비율을 보고하면 우리는 아무것도 하지 않습니다. 모든 보고서에 대해 위치 변경이 있다고 말합니다.

비율이 1이 되면 대상이 시각적 영역 내에 완전히 들어왔음을 의미합니다. 이 순간 우리는 Intersection Observer의 연결을 다시 끊고 이전 콜백 방법을 사용하여 대상 주위의 더 미세한 창으로 다시 연결합니다.

따라서 캡처 창(rootBounds)은 궁극적으로 더 미세한 창과 시각적 뷰포트 사이를 순환합니다.

어떻게 구현하나요? 이미 구현되어 있나요?

그렇습니다. 내 Github 저장소(https://github.com/AJK-Essential/Position-Observer)에 PositionObserver 클래스와 동일한 것을 구현했습니다. 파일은 dist 폴더에 있습니다. 해당 파일을 다운로드할 수 있습니다.

그럼
PositionObserver 클래스는 다음과 같이 가져올 수 있습니다:

import { PositionObserver } from "./position-observer.js";

로그인 후 복사

그런 다음 다음과 같이 이 PositionObserver의 인스턴스를 만듭니다.

const positionObs = new PositionObserver(posObsCallback);

로그인 후 복사

여기서 posObsCallback은 다음 유형의 객체 매개변수를 허용하는 함수입니다.

 {
  x: number;
  y: number;
  target: HTMLElement | Element;
  outOfViewport: boolean;
  rootBounds: DOMRect | null;
};

로그인 후 복사

positionObserver가 위치 변화를 감지했을 때 콜백으로 호출되는 함수입니다. 매개변수:

x: 대상의 x 좌표를 나타냅니다
y : 대상의 y 좌표를 나타냅니다
target: 타겟 자체를 나타냅니다
outOfViewport: 대상이 뷰포트의 시각적 영역을 벗어났는지 여부를 나타냅니다
rootBounds: 루트 요소 또는 캡처 창의 경계를 나타냅니다. 디버깅 목적으로 유용합니다.

지금까지 positionObserver가 설정되었습니다. 이제 요소의 위치 변화를 감지하려면 다음과 같이 관찰해야 합니다.

positionObs.observe(target);

로그인 후 복사

여기서 target은 관찰하려는 실제 요소를 나타냅니다.
위치 변경 관찰을 중지하려면 다음과 같이 사용할 수 있습니다.

positionObs.disconnect()

로그인 후 복사

또한 https://github.com/AJK-Essential/Position-Observer/blob/main/docs/target-scroll.html을 방문하여 스크립트 섹션에서 구현 예를 볼 수도 있습니다

이 관찰자의 한계:

타겟이 시각적 영역 내에서 움직일 때만 위치 변화를 감지할 수 있습니다.
뷰포트나 타겟의 크기 변경이 있을 경우 실패할 수 있습니다. 따라서 이러한 시나리오에서는 연결을 끊고 대상을 다시 관찰하는 것이 좋습니다.

그렇다면 이것이 완벽한 솔루션인가요?

모르겠습니다. 내 테스트에 따라 작동했습니다. 작동하지 않는 시나리오가 있을 수 있습니다…
제가 추천하고 싶은 것은 스크롤 듣기와 함께 사용하는 것입니다(그리고 연속 폴링을 대체하는 용도로 사용). 데모에서 스크롤할 때 대상 추적을 놓치는 경우가 가끔 있기 때문입니다.

이 Github 저장소에 있는 코드를 자유롭게 사용하고 테스트해 보세요.
(https://github.com/AJK-Essential/Position-Observer) 프로젝트/비즈니스 요구 사항에 맞게 또는 버그를 발견하고 이에 대한 솔루션이 있는 경우 비공개로 수정할 수도 있습니다.

도움이 되었기를 바랍니다.

위 내용은 Intersection Observer를 사용하여 HTML 요소의 위치 변화 관찰의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!