๐Ÿ”ŽIntersection Observer๋ž€?

ldh3907ยท2022๋…„ 3์›” 20์ผ
1

์›น์— ๋Œ€ํ•œ ์ดํ•ด

๋ชฉ๋ก ๋ณด๊ธฐ
1/3

๐Ÿ™‹โ€โ™‚๏ธ๋ฌดํ•œ ์Šคํฌ๋กค ๊ด€๋ จํ•ด์„œ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ intersection observer๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค..!

๐Ÿง™์ •๋ฆฌ

๋จผ์ € ์ •๋ฆฌ๋ถ€ํ„ฐ ํ•˜์ž๋ฉด intersection observer๋Š” ํƒ€๊ฒŸ ์—˜๋ฆฌ๋จผํŠธ์™€ ํƒ€๊ฒŸ์˜ ๋ถ€๋ชจ ํ˜น์€ ์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ์˜ ๋ทฐํฌํŠธ(viewport)๊ฐ€ ๊ต์ฐจ๋˜๋Š” ๋ถ€๋ถ„์„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๊ด€์ฐฐํ•˜๋Š” API์ž…๋‹ˆ๋‹ค.

  • ์—ฌ๊ธฐ์„œ ๋ทฐํฌํŠธ๋Š” ํ˜„์žฌ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๊ณ  ์žˆ๋Š” ๋‹ค๊ฐํ˜•์˜ ์˜์—ญ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

ํ•œ๋งˆ๋””๋กœ ํ™”๋ฉด์— ๋‚ด๊ฐ€ ์ง€์ •ํ•œ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๋ณด์—ฌ์ง€๊ณ  ์žˆ๋Š”์ง€๋ฅผ ๊ด€์ฐฐํ•˜๋Š” API ๋ผ๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ด์ œ intersection observer์— ๋Œ€ํ•ด ์•Œ์•˜์œผ๋ฉด ์“ฐ๋Š” ์ด์œ ์— ๋Œ€ํ•ด๋„ ์•Œ์•„๋ด…์‹œ๋‹ค.

๐Ÿคทโ€โ™‚๏ธ์™œ ์“ธ๊นŒ?

  1. ์ฒซ๋ฒˆ์งธ ์žฅ์ ์€ reflow๋ฅผ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋กค ์ด๋ฒคํŠธ๋Š” ํ˜„์žฌ์˜ ๋†’์ด ๊ฐ’์„ ์•Œ๊ธฐ ์œ„ํ•ด offsetTop์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ •ํ™•ํ•œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ๋งค๋ฒˆ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๋‹ค์‹œ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ reflow๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ์ด ๊ณผ์ •์ด ๋ฐ˜๋ณต๋˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์˜ ์„ฑ๋Šฅ์ด ์ €ํ•˜๋˜๊ณ , ํ™”๋ฉด์˜ ๋ฒ„๋ฒ…๊ฑฐ๋ฆผ์ด ์ƒ๊ธธ ์ˆ˜ ๋ฐ–์— ์—†์Šต๋‹ˆ๋‹ค.

  1. ๋‘๋ฒˆ์งธ ์žฅ๋ฒ”์€ ํ˜ธํ™˜์„ฑ์ด ์ข‹๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

intersection observer๋Š” IE๋ฅผ ์ œ์™ธํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋งˆ์น˜๋ฉฐ

์—ฌ๋Ÿฌ๊ฐ€์ง€ ์—˜๋ฆฌ๋จผํŠธ ์˜ต์ €๋ฒ„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์ง€๋งŒ, reflow๋ฅผ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์—์„œ intersection observer๋ฅผ ์“ฐ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ €๋„ intersection observer๋ฅผ ์• ์šฉํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

์ฐธ๊ณ 

Intersection Observer - ์š”์†Œ์˜ ๊ฐ€์‹œ์„ฑ ๊ด€์ฐฐ
Intersection Observer ๊ฐ„๋‹จ ์ •๋ฆฌํ•˜๊ธฐ

profile
ํ˜์‹ ์ ์ธ FE๋ฅผ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€