# intersection observer

cloud_oort

상황 Money Mindset이라는 웹 서비스를 구현한 뒤, Main 페이지를 꾸미기 위해 요즘 유행하는 스크롤 애니메이션을 구현하고자 한다. 사용 도구 구글과 유튜브에서 스크롤 애니메이션 구현 방법을 알아보다가 코딩애플님의 영상을 보고 Intersection Observer을 사용하기로 결정했다. Intersection Observer Intersection Observer는 루트 요소와 타겟 요소의 교차점을 관찰하는 API로 자바스크립트에 내장되어 있어 신뢰성을 보장받은 공식 API이며, 기존의 scroll 이벤트보다 성능상으로 훌륭하다. 기존의 scroll 이벤트는 scroll이 발생할 때마다 특정 element가 화면에 존재하는지 계속 체크해야 하며, 작업들 모두 동기적으로 실행되기 때문에 성능적으로 과부하가 올 수 있다. 이에 반해 Intersection Obser

frontendohs

포트폴리오 웹 사이트를 만들던 도중 타겟 요소가 뷰포트 내에 들어왔는지를 알기 위해서는 Intersection Observer API를 이용해야 한다는 것을 알았습니다. Intersection Observer API는 다른 블로그 및 사이트에서 아주 자세하게 설명되어 있지만, 직접 실습해보고 복습하기 위해서 제 블로그에 다시 정리해 보겠습니다. 배경 Intersection Observer API가 나오기 이전에는 getBoundingClientRect()나 다른 해결방법을 사용하고 있었지만 이는 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 줄 수 있었기 때문에 Intersection Observer API가 등장하게 되었습니다. 또한 Intersection Observer API로 아래의 5가지 기능을 손쉽게 추가할 수 있다는 것도 알 수 있었습니다. 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의

guen9310

개요 원티드 프리온보딩 과제를 진행하던 중 무한 스크롤 기능을 구현해야 했다. 평소에는 React-Query의 useInfiniteQuery를 이용해 무한 스크롤을 구현하였으나, 이번 과제를 진행하는 동안에는 해당 라이브러리를 사용할 수 없어서 직접 만들 수 밖에 없었다. App.tsx 처음에는 윈도우 스크롤 이벤트를 사용하여 무한스크롤을 구현하였으나, 이 방식을 적용하게 되면 불필요하게 많은 호출이 이루어져 브라우저의 성능 저하를 일으켰다. 그래서 이를 제어하기 위해 쓰로틀링 기법을 이용해야 했으나, 혹시 다른 방법은 없을까 하고 찾던 중 Intersection Observer API를 알게 되어 해당 API를 이용한 무한 스크롤을 구현하기로 생각

nohnohnohnoh

2016년 4월 구글 개발자 페이즈 통해 소개, MDN에서 Intersection Observer의 필요성을 아래와 같은 예를 들어 설명 페이지 스크롤 시 이미지를 지연 로딩 할 때 infinite scrolling을 통해 스크롤할 때 새로운 콘텐츠를 불러올 때 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때 > 웹사이트를 개발할 때 특정 위치에 도달했을 때 어떤 액션을 취해야 한다면 보통 addEventListener()의 scroll 이벤트가 먼저 떠오른다. document에 스크롤 이벤트를 등록하고, 특정 지점 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백함수를 등록 하지만, scroll 이벤트는 단시간에 수백번, 수천번 호출될 수 있고 동기적으로 실행되기 때문 메인스레드에 영향을 준다. 또한 한페이지내에 여러 scroll 이벤트가 등록되어 있을 경우, 각 엘리먼트마다 이벤트가

dudwns

무한 스크롤이란? 컨텐츠를 페이징 하는 기법 중 하나로, 아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다. Facebook, Twitter, Instagram 등 SNS에서 주로 사용된다. 구현 방식은 크게 두 가지가 있다. 1. scroll 이벤트를 사용해 구현하기 Window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식 2. Intersection Observer로 구현하기 현재 보고 있는 화면을 감시해서 노출이 되면 동작하는 방식 observe, unobserve를 잘 사용해야 한다. threshold 값으로 observe 대상이 얼마나 노출되어 있는지에 따라 동작하게 할 수 있다. 상황에 따라 무한 스크롤 UI보다는 직접 더 불러오는 인터렉션을 통해 로딩하는

kim98111

Intersection Observer API Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지 구별하는 기능을 제공합니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있습니다. new IntersectionObserver()호출하여 반환된 객체를 통해 observe 메서드를 호출하여 관찰할 대상을 등록할 수 있습니다. Parameters IntersectionObserver 생성자 함수는 두 개의 인수를 전달받습니다. (entries, observer) => { ,,, } : 첫 번째 인수로 전달되는 콜백 함수는 관찰 대상이 등록되거나 교차 이벤트가 발생하면 호출되는 함수입니다. 콜백 함수가 호출

deepthink

들어가며 결제하기 페이지를 만드는 중, 결제 버튼이 브라우저 최하단에 갔을 때 div가 보이는 형태로 구현하고 싶었다. 이전 무한스크롤을 구현할 때 사용했던 Intersection Observer가 그 기능을 충실히 해줄거라고 생각했고, 시도했다. 인터섹션 옵저버 이 gif 처럼, 테스트박스가 스르륵 나오는것! Intersection Observer란? 먼저 간단하게 정리하고 가자. > - Intersection Observer API는 다음과 같은 상황에 호출되는 콜백을 생성하는 기능을 제공합니다: > (1) 대상(target) 으로 칭하는 요소가 기기 뷰포트나 특정 요소(이 API에서 이를 root 요소 혹은 root로 칭함)와 교차함. > (2) observ

dev4jaehun_kim

⚠️ Disclamer ⚠️ > 해당 요소는 제가 Intersection Observer API를 학습하며, 이해한 내용을 바탕으로 작성한 글입니다. 따라서 잘못된 이해로 인해 실제와 차이가 있을 수 있습니다. > 잘못된 내용이 있다면 댓글로 알려주시면 감사하겠습니다. 🙏 시작하기에 앞서 Intersection Observer API를 사용하여 무한스크롤을 구현하며, 도저히 내용이 이해가 되지 않아서 구현에 어려움이 있었습니다. 그러다가 아래 글들을 읽고, 드디어 이해하고 구현까지 성공했습니다. 감사한 마음에 글 가장 앞에 링크를 작성했습니다. Special Thanks > 다음 글들이 이해에 큰 도움이 되었습니다. > https://growingtangerine.tistory.com/70 > https://growingtangerine.tistory.com/71 > http://blog.hyeyoonjung.com/2019/01/09/intersectionob

moonelysian

삽질의 시작 스크롤 중간에 탭 영역을 만나면 상단에 탭이 고정되고 현재 보이는 영역에 맞춰서 탭이 활성화되는 그것 말이다. 인터넷 쇼핑 좀 해봤다~하면 모두 아는 그것. 전 회사에도 했던 기능을 또 만들게 됐다. 그래서 처음엔 저번 회사와 똑같이 구현했다. 구현 방법 scroll에 현재 스크롤 위치를 반환하는 이벤트 리스너를 추가해 hook을 만든다. 만든 훅으로 현재 스크롤 위치와 탭의 offsetTop을 비교하며 상단에 있는지 없는지 판단한다. 상단이면 고정 아니면 원위치 시킨다. 현재 스크롤과 각 영역별 offsetTop을 비교해서 탭을 활성화 시킨다. 이렇게 아주 순식간에 만들었다. 동작은 아주아주 잘하지만..throttle이나 debounce를 걸어놨다고 해도 너무나도 많이 호출되는 hook때문에 성능 고민이 생겼고 무한 스크롤 구현 코드를 보니 intersection observer api를 사용하고 있었다. 문서를 보니 실제로도 스

apparatus1

1. 무한스크롤 UI 무한스크롤 UI는 특정 콘텐츠를 보여주는 화면에서 스크롤을 내려서 콘텐츠가 모두 보여지거나(View Port 상 콘텐츠가 모두 보여질 경우) 스크롤이 바닥에 닿았을 때 콘텐츠를 추가로 불러와서 보여지는 UI를 말한다. UI를 이렇게 처리하는 이유는 사용자가 이미지를 보여주는 웹 페이지에 들어왔을 때 모든 이미지를 다 불러올 필요 없이 화면에 보여지는 이미지만 불러왔다가 스크롤을 내렸을 때 추가로 이미지를 불러올 수 있으니 서버 부하 측면에서도 이점이 있고, 사용자도 모든 이미지를 한번에 받지 않아도 되니 페이지를 빠르게 로딩할 수 있게 된다. 2. 무한스크롤 UI 적용 방법 2가지 2-1) Scroll Event 무한스크롤 UI를 적용하는 첫 번째 방법은 element.addEventListener 이벤트 리스너를 통해 scroll event를 걸어 놓는 것. 사용자가 페이지에서 스크롤하면 해당 이벤트가 발생했을

chosh91

intersection observer 특정 요소가 Viewport 안에 들어오는 순간이나, 나가는 순간을 감시 예를 들면 어떤 요소의 위치가 화면(Viweport)에 들어오면 image 로딩, 마지막 요소 또는 뒤쪽의 요소가 화면에 들어오면 데이터 패칭해서 보여주기, 어떤 요소의 위치가 화면에 들어오면, 애니메이션 시작하도록 구현 의 작업들을 할때 사용할 수 있음 스크롤 값을 받아와서 요소의 절대값, 상대값으로 계산 하는 방식보다 편리하고, 성능도 더 좋음 intersection observer 를 사용하는 이유 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠를 지연 로딩 많은 데이터를 한번에 받아오지 않고 무한 스크롤로 나누어 요청 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 표시 여부에 따라 애니메이션과 같은 작업을 수행 할지 여부를 결정 리액트에서 사용하는 방법 무한 스크롤 구현 시,

sjoleee_

https://www.bemyidol.xyz/ 이전에 만들었던 아이돌만들기 서비스의 메인페이지가 너무 마음에 안들어서 수정해보았다. 연휴동안 시간도 남고, 이왕 하는 거 스크롤 애니메이션을 적용해보았다. > 본 글은 정보성 글이 아니고 개인적인 생각의 기록일 뿐입니다. 인터랙티브 웹 사용자에게 있어 서비스란 기능도 물론 중요하지만, 비주얼, 심미성이 굉장히!!! 중요한 요소라고 생각한다. 하지만 실제로 지금까지 해온 공부는 이론적인 부분이나 기능을 구현하기 위한 것이 대부분이었고, 속으로는 '인터랙티브 웹? 대충... 뭐, 할 수 있을 것 같은데?' 라는 오만하고 안일한 생각을 해왔다. 막상 해보니 간단할 것이라고 생각했던 인터랙션을 구현하는 데도 굉장히 머리가 아팠다.

corgi-world

React Query (useInfiniteQuery)와 Prisma (Cursor-based pagination)로 구현해보는 무한 스크롤 React Query의 useInfiniteQuery와 Prisma의 Cursor-based pagination을 사용하여 무한 스크롤에 필요한 모든 것을 구현해 보겠습니다! 이번 구현에 사용한 데이터는 아래 첨부한 이미지와 같으며, 전체 코드는 이 곳에서 확인하실 수 있습니다! ![](https://velog.velcdn.com/images/corgi-world/post/7507ed62-d8ff-432e-aafb-3d768741d0b0

kec0130

회사 서비스에서 환자의 재활 운동 리포트를 문서 뷰어처럼 볼 수 있는 컴포넌트를 개발하게 되었다. 전체 페이지와 현재 페이지 번호를 보여주고, 전후 페이지로 이동할 수 있는 버튼이 있는 형태였다. Intersection Observer API를 활용하여 해당 기능을 구현한 방법을 정리해보았다. > 예시 코드 전체 보기: https://codesandbox.io/s/page-navigation-with-intersection-observer-pbz9cs 현재 페이지 번호 추적하기: Intersection Observer 문서 뷰어에서 가장 핵심적인 기능 중 하나는 현재 화면에 보이는 페이지가 몇 번째 페이지인지 트래킹하는 것이다. 페이지를 이동할 때마다 현재 화면에 나오는 페이지의 번호를 알아야 한다. 이렇게 화면에서 특정 요소의 가시성

__dan_n

구현 사항 🚀 오늘 제가 구현하고 싶은 기능은 아래 사진처럼 항상 떠 있는 말풍선을 스크롤 했을 때 FadeIn 되도록 하는 것입니다. 처음에 생각한 방법은 현재 스크롤 된 간격을 구해서, 특정 위치에 도달하면 display: none으로 설정된 말풍선이 보여지도록 바꾸는 것이었는데, 찾아보니 hooks 를 사용하여 간편하게 구현할 수 있다고 하여 hooks를 이용한 방식으로 구현하였습니다. 구현 방법 🤔 1. custom hooks 사용 이유 제가 custom hooks를 사용한 가장 큰 이유는 반복되는 로직을 다양한 곳에서 재사용하기 위함입니다. 현재 제가 개발 중인 웹에서는 FadeIn 효과가 한 곳에서만 사용되지만

sjoleee_

왜 무한스크롤을 적용했나? > 📝 구현 방법부터 읽으셔도 무방합니다. 배경 프로젝트에서 모든 아이돌 멤버 데이터를 가져와 카드 형태로 뿌려주는 기능을 구현했습니다. 처음 채택했던 방식은 페이지 진입과 동시에 모든 아이돌 멤버 데이터를 get한 후, 전부 다 렌더링하여 리스트를 생성하는 방식이었습니다. 그에 따라, 검색기능 역시 추가적인 api 호출 없이 searchInput에 입력된 값이 포함되어있는지, 처음 가져온 데이터에 filter메서드를 사용하는 방식으로 만들어졌습니다. > 📝 아래 글에서 등장하는 것과 같은 프로젝트입니다. https://velog.io/@sjoleee_/선택-취소-기능-1 https://velog.io/@sjoleee_/선택-취소

1-blue

🤔 Intersection Observer API 루트 요소와 타겟 요소의 교차점을 관찰하는 API입니다. > 루트 요소를 뷰포트로 하고 타겟 요소를 애니메이션을 실행할 태그로 지정한다면 스크롤에 의해서 뷰포트와 태그가 교차하는 경우에 원하는 애니메이션을 실행할 수 있습니다. 😮 Intersection Observer API 사용법 옵션값들 root: 루트 요소를 지정하는 속성 ( 생략 시 뷰포트 ) rootMargin: 루트 요소의 범위를 확장하는 속성 ( 단위 지정 ) threshold: 교차점의 범위를 지정하는 속성 0.0~1.0 ( 배열도 가능 ) 콜백의 매개변수 boundingClientRect: 타겟 요소의 경계 사각형 정보 intersectionRatio: 루트 요소와 타겟 요소의 교차 비율 ( 0.0~1.0 ) intersectionRect: ? `root

khy226

TL;DR addEventListener()의 scroll 이벤트를 이용해서 무한 스크롤을 구현할 수 있지만, reflow 등의 성능 문제가 발생 이를 해결하기 위해서 Intersection observer를 사용할 수 있음 Intersection observer는 브라우저 뷰포트(Viewport)와 원하는 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 아닌지 구별하는 기능을 제공함 new IntersectionObserver(callback, options) 방식으로 관찰자를 초기화하고, 관찰할 대상을 지정할 수 있음. boundingClientRect 등의 메서드를 사용하면, reflow를 일으키지 않고 관찰 대상의 경계를 계산할 수 있음 따라서, 무한 스크롤 혹은 특정 요소를 관찰하고 싶을 때는 Intersection observer API 사용을 권장함 javascript로 무한 스크롤을 구현한다면? 웹

yumyum123

Intersection Observer? > scroll이벤트는 이벤트가 동기적으로 실행되기때문에  짧은 시간에 많은 콜백이 일어나면서 메인 스레드에 큰 부하를 준다. Intersection Obsever은 비동기적으로 실행되기때문에 reflow를 발생시키지 않기때문에 성능 상에서 유리하다. 사용방법 Intersection Obsever 인스턴스를 생성 키워드를 통해 인스턴스 생성한다 , 2개의 파라미터를 받는다 은 가시성의 변화가 생겼을때 호출되는 콜백 로직 는 만들어질 인스턴스에서 콜백이 호출되는 상황을 정의 만약 더이상 타겟요소를 구독할 필요가 없다면 로 제거 할 수 있다 Callback 관찰할 대상(Target)이 등록되거나 가시성에 변화가 생가면 관찰자는 콜백을 실행 콜백은 2개의 인수(entries, observer)을 가진다 Options root 타겟요소의 가시성을 확인할 때 사용되는 루트요소

tmax_ux_dev

about "scroll" 이번에 제가 작업하고 있던 프로젝트에서는 스크롤 이벤트를 적용해야하는 경우가 있었습니다. 저는 React에서 scroll이벤트를 적용하기 위해서 아래와 같은 코드를 사용했었는데요. (React 기준) 함수형 컴포넌트의 경우 class형 컴포넌트의 경우 그리고 스크롤 영역을 계산하기위해서 아래와 같은 코드를 작성했습니다. getBoundingClientRect().top 과 같이 client가 보는 view내에서 상대적인 y값을 구하기위해 해당 API를 사용해야 했습니다. 그런데, 최근에 발견한 한 문장 >모든 코드가 🌼️메인 스레드에서🌼️ 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. 사이트가 이러한 테스트들과 함께 로드되면 상황이 더욱 나빠질 수 있습니다. 그래서 Intersection Observer API를 쓰면 좋습니당 scroll 이벤트와 getBound..를