뷰포트에 요소가 표시되는지 여부를 어떻게 알 수 있습니까?

본고에서 우리는 브라우저의 뷰포트에서 요소가 보이는지 여부를 어떻게 알고 검사하는지 배울 것이다.
시작하기 전에 브라우저 엔진에 비해 뷰포트가 무엇인지 설명하고 싶습니다.

A Viewport is the area (ordinarily rectangular) of our computer graphics (Screen) that is currently being viewed. In other words, it's the area of your computer screen that is currently visible to you (physically).

만약 나의 해석이 명확하지 않다면 MDN docs를 보셔서 깊은 해석을 얻으십시오.
왜 이것이 너에게 유용합니까?요소가 현재 브라우저의 뷰포트에 표시되는지 왜 알아야 합니까?
다음과 같은 경우에 유용합니다.

고객이 사이트의 밑바닥으로 굴러갈 때, 당신은 덮어쓰기 그림을 보여 주고 그들에게 당신의 시사 통신을 구독해 달라고 요구하고 싶다. (예를 들어 블로그 사이트라면, 이것은 그들이 방금 읽고 구독을 시키고 싶다는 것을 나타낼 수 있다.)

요소가 사용자에게 보일 때 읽을 계수기 값을 추가하고자 합니다

웹 페이지의'A구역'이 나타날 때 애니메이션을 터치하고fadeIn 애니메이션 등

화면 상단의 진도표로 페이지에 볼 수 있는 내용이 얼마나 많은지 알려 줍니다(당신은 블로그 사이트나 긴 텍스트 읽기와 관련된 사이트에서 본 적이 있을 수 있습니다).

자바스크립트 마술을 한다. 예를 들어 영상을 재생하고 짧은 팝업 광고를 표시하며 도움말 로봇을 전환한다.🤖 등

나는 지금까지 너도 머릿속에서 유용한 것들을 보았다고 믿는다. 본문의 결말에서 너는 더욱 많은 견해와 생각을 얻을 수 있을 것이다.그래서...자, 시작합시다.

훈련하다

원소에 getBoundingClientRect() 함수를 사용하면 원소의 크기와 뷰포트에 대한 위치에 대한 정보를 제공하는 DOMRect 대상을 되돌려줍니다.
그래서 저희가 yourElement.getBoundingClientRect()또는elementInfo = yourElement.getBoundingClientRect()

A DOMRect describes the size and position of a rectangle.

getBoundingClientRect()에서 반환된 DOMRect 객체는 대상을 계산하는 데 사용할 수 있는 키 값(픽셀 단위)이며, 채우기 및 경계 너비 등 전체 요소를 포함하는 최소 사각형입니다.
반환된 객체는 다음과 같습니다.

 {
      x: 20,
      y: 5.5,
      width: 882,
      height: 198.890625,
      top: 5.5,
      right: 902,
      bottom: 204.390625,
      left: 20,
    };

좀 더 자세히 설명해 봅시다.혼동을 피하기 위해서 나는 시각을 분리했다.

DOMRect 키 값(픽셀 단위)

X 및 왼쪽

뷰포트(브라우저 화면)와 DOMRect(요소)의 왼쪽 위 영역 사이의 거리를 나타냅니다.

Y 및 상단

뷰포트 위쪽(브라우저 화면)에서 DOMRect 위쪽(요소)까지의 거리를 나타냅니다.

너비

DOMRect의 너비를 나타냅니다.

두께

DOMRect의 높이를 나타냅니다.

The width and height properties of the DOMRect object returned by the method include the padding and border-width, not only the content width/height. In the standard box model, this would be equal to the width or height property of the element + padding + border-width. But if box-sizing: border-box is set for the element this would be directly equal to its width or height.

MDN Docs 상자 사이즈를 보실 수 있습니다.

하단

뷰포트 위쪽(브라우저 화면)에서 DOMRect 아래쪽(요소)까지의 거리를 나타냅니다.

오른쪽

뷰포트 왼쪽(브라우저 화면)에서 DOMRect(your Element) 오른쪽(오른쪽 아래 구석)까지의 거리를 나타냅니다.그것의 값은 x + 너비와 같고, 만약 너비가 마이너스라면 x이다.

전체 차트

만약 당신이 이 도표들이 어디에서 왔는지 알고 싶다면, 나는 Figma로 설계한 것이다

몇 가지 유용한 힌트

계산 국부 가시도

만약에 우리가 어떤 요소가 뷰포트에서 부분적으로 보이는지 알고 싶을 때, 이벤트리스트를 지정했는데, 이것은 페이지를 스크롤할 때마다 터치됩니다. 예를 들어:

window.addEventListener("scroll", () => {
        //Some javascript magic here...
      });

뷰포트 높이 (화면) 에서 top/y 값을 간단하게 빼고, 밑에 있는 값이 0보다 크도록 검사할 수 있습니다.window.innerHeight 또는 document.documentElement.clientHeight를 사용하여 뷰포트 높이를 얻을 수 있지만, 일반적으로 innerHeight와 documentElement의 브라우저 호환성 때문에 뷰포트 높이를 결합하여 사용하는 것이 더 안전합니다.
따라서 다음과 같은 방법을 사용할 수 있습니다.

const height = 
window.innerHeight || document.documentElement.clientHeight;

따라서 로컬 가시성은 조건으로 간주됩니다.
뷰포트 높이 - 위쪽은 0보다 크고 아래쪽은 0보다 큽니다.

const viewportHeight =
            window.innerHeight || document.documentElement.clientHeight;
// condition 
(viewportHeight - top > 0 && bottom > 0)

If this is getting a little rough, it might be helpful to use the diagram and a pen and paper (I definitely did).

계산 가시도

현재 이 부분은 거의 똑같이 간단하다.완벽한 가시성 요구 사항은 다음과 같습니다.
아래쪽은 0보다 크고, 아래쪽은 뷰포트 높이보다 작거나 같으며, 위쪽은 0보다 크거나 같음
그래서 그것은 보기에 다음과 같다.

bottom > 0 && bottom <= viewportHeight && top >= 0

이 점에서 실시간 계산getBoundingClientRect() 값live website을 보면 좋을 것 같습니다.
또한 이전에 수행한 모든 조건/검사가 어떻게 가시성 테스트를 통과했는지 이해하는 데 도움을 줄 것입니다.페이지를 스크롤하여 마술을 보기만 하면 된다.
이것은 매우 간단한 웹 페이지로 정성들여 제작하고 이해하기 쉬운 코드가 있다😎.
코드를 익히고 싶으면 마음대로 복제/갈라지기gitHub repo를 할 수 있습니다.
현재, 분명히 우리가 지금까지 한 모든 것은 수직으로 원소를 굴리기 위해서(상하 굴리기 & 상하 굴리기)였지만, 수평으로 원소를 굴리기 위해서(왼쪽 굴리기 & 오른쪽 굴리기)는?
다음과 같은 방법으로 조건을 브라우저 너비에 맞추어야 합니다.

(window.innerWidth || document.documentElement.clientWidth) 

그래서 우리는 이런 물건이 있다.

(right > 0 && right <= width)

브라우저 호환성

이렇게 본 강좌는 이것으로 끝냅니다.나는 네가 그것이 유용하다고 생각하기를 바란다.이 글을 다시 읽거나 보존하고 싶으면 책갈피를 작성하고like/unicorn을 남겨 두십시오🙂. 아래의 평론/토론 부분에서 당신의 생각(개선, 생각 등)을 알게 해 주세요.건배🥂.