웹 페이지의 두루마리를 어떻게 관찰하는지는 아주 적은 계산에 불과하다

42520 단어 webdevintersectionobserverjavascriptbeginners
"안녕하세요, 저는 이미 1년여 동안 첫 블로그를 내지 않았습니다."나는 개인적인 문제를 많이 겪었기 때문에 소셜미디어에서 오랫동안 쉬어야만 했다.저는 지금 여기 있습니다. 하느님께 감사 드립니다.이 문장이 너를 도울 수 있기를 바란다.네, 이 글의 주제로 돌아가겠습니다.
많은 개발자들이 두루마리 같은 웹 페이지를 관찰하려고 노력하고 있다.일부 해결 방안은 원소의 편이량을 계산할 수도 있고 다른 해결 방안을 통해 계산할 수도 있다.

선결 조건


HTML, CSS, JS에 대해 알아야 합니다.나는 이 문장에서 이 문제를 토론하지 않을 것이다.
HTML, CSS, JS를 이미 알고 있다면, 이 글을 계속 읽을 수 있습니다.

교차점 관찰자 API


mdn의 정의에 따라 "Intersection Observer API는 목표 요소와 조상 요소나 최고급 문서의 보기 포트의 교차에서 변경된 것을 비동기적으로 관찰하는 방법을 제공한다."
여러 해 전에 웹 개발자들은 페이지의 보기 포트를 관찰하기 위해 오프셋 등 도구를 대량으로 계산해야 했다. 사용자의 체험이 불쾌하기 시작했기 때문에 혼란스러워질 수 있다.교차로 관찰자 API는 다음 용도로 사용할 수 있습니다.
  • 이미지 또는 페이지 내용 로드 지연
  • CSS 애니메이션
  • 무한 스크롤
    • 이것은 기본적으로 페이지의 요소를 관찰하거나 요소를 볼 때 사용할 수 있다.이것은 매우 편리하다. 왜냐하면 당신은 너무 많은 계산을 필요로 하지 않기 때문이다. 당신은 사거리의 관측자만 필요로 한다.
    Intersection Observer API를 어떻게 사용하는지 보여주기 위해 관찰할 내용을 포함하는 간단한 웹 페이지를 만들고 요소가 나타날 때와 요소가 나타나지 않을 때 우리의 페이지가 반응하도록 할 것입니다.
    네, 코드를 좀 쓰겠습니다!
    먼저 intersection observe 또는 임의의 이름의 폴더를 만듭니다.이 디렉토리에서 HTML 파일, CSS 파일 및 JS 파일을 만듭니다.
    내가 전에 말했듯이, 나는 라벨 같은 것을 토론할 생각은 없다. 나는 네가 이미 알고 있다고 생각한다.
    다음에 다음 코드를 html 파일에 복사하면 내비게이션 표시줄이 있는 게시물 목록을 보여 줍니다.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Intersection Observer!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main--container">
      <div class="nav--wrapper">
        <nav class="navbar--container nav-intersect">
          <ul class="links--container">
            <li class="navlink logo">Logo</li>
            <li class="navlink">Home</li>
            <li class="navlink">About</li>
            <li class="navlink">Contact</li>
          </ul>
        </nav>
      </div>
      <div class="posts--container">
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
        <div class="card">
          <div class="card-title">Card title</div>
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            laudantium assumenda soluta unde tenetur impedit possimus, iure
            nobis illum eaque? Consequuntur nisi modi nesciunt vero placeat sit,
            reiciendis ratione deleniti.
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
    스타일과 스크립트 파일 이름을 사용자가 만든 사용자 정의 이름으로 바꿔서 변경 사항을 볼 수 있도록 하십시오.
    현재 페이지는 다음과 같습니다.

    그리고 css 파일로 이동해서 다음 코드를 복사합니다.
    * {
  margin: 0;
  padding: 0;
}

.navbar--container {
  height: 7vh;
  background-color: white;

  position: fixed;
  width: 100%;
}

.nav--wrapper {
  height: 7.5vh;
  width: 100%;
}

.nav-intersect {
  position: fixed;
  z-index: 10;
  /* -webkit-box-shadow: 0px 1px 3px -1px rgba(105, 105, 105, 0.79);
  -moz-box-shadow: 0px 1px 3px -1px rgba(105, 105, 105, 0.79); */
  box-shadow: 0px 1px 3px -1px rgba(105, 105, 105, 0.79);
}

.links--container {
  padding-top: 20px;
  display: flex;
  list-style: none;
}

li:nth-child(2) {
  margin-left: auto;
}

.navlink {
  padding: 0 5px 0 5px;
  cursor: pointer;
}

.navlink:hover {
  color: brown;
}

.posts--container {
  position: relative;
  display: grid;
  max-width: 800px;
  margin: auto;
  padding-top: 100px;
  gap: 4em;
}

.card {
  height: 100%;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(183, 192, 206, 0.4);
  -moz-box-shadow: 0px 1px 5px 0px rgba(183, 192, 206, 0.4);
  box-shadow: 0px 1px 5px 0px rgba(183, 192, 206, 0.4);
  width: 100%;
  border-radius: 5px;
  padding: 20px;
}
    classname nav intersect에서, 나는 상자 음영 규칙이 있는 오래된 브라우저에 추가 규칙을 추가했지만, 나는 그것을 주석해 버렸다. 왜냐하면 내 브라우저에는 css 규칙이 없기 때문에, 너는 마음대로 주석을 취소할 수 있다.

    이 예에서 우리는 무엇을 할 것인가.


    사용자가 페이지에 들어갈 때 내비게이션 표시줄에는 네모난 그림자가 없지만, 사용자가 스크롤을 시작할 때 내비게이션 표시줄은 고정되어 있고 네모난 그림자가 표시되고 표시됩니다.이를 위해 Intersection Observer API를 사용합니다.
    또 이런 배치는 모바일 기기에 민감하지 않다.
    페이지는 다음과 같습니다.

    이제 본 강좌의 주요 부분으로 들어갑니다.한 원소를 정확하게 관찰할 수 있도록 다른 약간 큰 원소로 포장하기만 하면 된다. 왜냐하면 포장기와 원소는 같은 높이, 너비, 심지어 크기를 가질 수 없기 때문이다.포장기의 명칭으로 볼 때, 그것은 그것이 반드시 포장되거나 포함되어야 한다는 것을 의미한다.이것이 바로 유명nav-wrapper에서 원소의 높이가 서브원소의 높이navbar--container보다 약간 큰 이유이다.
    html 파일로 돌아가서main-container로 스크롤합니다. 다음 div 에는 클래스 이름이 비어 있습니다. 이 이름 nav--wrapper 을 추가하십시오.아무런 변화가 없다. 이것은 우리가 관찰할 원소의 포장이다navbar--container.
    js 파일로 들어갑니다.
    부모 패키지와 하위 패키지를 저장하는 변수를 만들 것입니다.
    const parent = document.querySelector(".nav--wrapper");
const navbar = document.querySelector(".navbar--container");
    교차점 관찰자의 구조 함수 new IntersectionObserver() 를 호출해서 호출할 수 있습니다. 이것은 두 개의 매개 변수, 한 개의 리셋 함수와 한 개의 옵션을 포함합니다.

    반송


    대상 요소가 보기에 있든 없든 이것은 실행 함수이며, 이것은 옵션 대상의 영향을 받는다.

    옵션


    이것은 속성이 있는 대상으로 목표 요소의 변경 사항에 언제/어디서 반응할지 설정할 수 있습니다.다음과 같은 특성이 있습니다. -
  • 루트
    대상의 가시성을 관찰하는 뷰포트로 사용되는 요소입니다.비어 있으면 기본적으로 보기 포트입니다.
  • 루트 모서리
    이것은 루트 주위의 경계입니다. 보통 px 또는 백분율로 표시됩니다.
  • 임계값
    단일 숫자일 수도 있고, 관찰자의 리셋이 목표의 가시성 백분율로 실행되어야 한다는 것을 가리키는 숫자 그룹이 될 수도 있다.원소의 가시성이 언제 50%인지만 측정하고 싶다면 0.5의 값을 전달할 수 있다.가시성이 다른 10%를 초과할 때마다 리셋을 실행하려면 그룹을 [0,0.10,0.20,0.30,...1]로 지정할 수 있습니다.값이 1.0인 것은 모든 픽셀이 보이기 전에 한도값이 통과했다고 생각하지 않는다는 것을 의미한다. 이것이 바로 부모 패키지가 요소를 정확하게 표시하기 위해 조금 더 커야 하는 이유다.
    • 이제 options 대상을 만듭니다.
    let options = {
  root: null,
  rootMargin: "0px",
  threshold: [0.0, 1.0],
};
    리셋 함수에 대해 항목 목록을 매개 변수로 받아들인다. 나는 arrow 함수를 호출하여 코드에 추가할 것이다.
    let navbarObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      navbar.classList.add("nav-intersect");
      return;
    }
    navbar.classList.remove("nav-intersect");
  });
}, options);
    먼저 IntersectionObserver의 실례를 만들고, 리셋과 옵션을 매개 변수로 방금 만든 실례에 넣었습니다.그리고 리셋에서 우리는 속성 접근 항목(목표 요소와 그 루트 용기가 특정한 전환 시간에 교차하는 것을 묘사함)을 사용하여 이러한 설명을 검사할 수 있다. 예를 들어 목표 요소가 교차할 때 우리는 isIntersecting 속성을 사용한다.
    다음에, 우리는 내비게이션 표시줄이 보기에 없을 때 표시하려고 하기 때문에, 이 항목들을 순환해서 훑어보고 조건을 만들 것입니다.우리는 isIntersecting 속성을 부정할 수 있다.이렇게 하면 탐색 모음 요소가 더 이상 뷰에 없는 경우 뷰에 다시 추가하기만 하면 됩니다.
    Intersection Observer 인스턴스의 observe 속성을 호출하여 이 요소를 관찰해야 합니다.
    navbarObserver.observe(document.querySelector(".nav--wrapper"));
    이것은 js 파일의 모든 코드입니다.
    const parent = document.querySelector(".nav--wrapper");
const navbar = document.querySelector(".navbar--container");

let options = {
  root: null,
  rootMargin: "0px",
  threshold: [0.0, 1.0],
};

let navbarObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      navbar.classList.add("nav-intersect");
      return;
    }
    navbar.classList.remove("nav-intersect");
  });
}, options);

navbarObserver.observe(document.querySelector(".nav--wrapper"));
    페이지를 스크롤하면 네비게이션 표시줄에 네모난 그림자가 추가된 것을 볼 수 있습니다.
    만약 교차점 관찰자 API의mdn 문서가 없다면 나는 이 글을 완성할 수 없다. 너도 가서 보아야 한다!click here,이것은 상당히 길지만, 우리가 여기서 한 기본적인 예시를 통해 당신은 따라잡을 수 있을 것입니다.
    나는 네가 이 문장을 좋아하길 바란다.
    Istio study #1 ~architecture~
    UIColor 변환 및 단순 확장

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage