[TIL๐ฅ] Day23(9/8)
Introduction
์ค๋์ ๋ฌดํ ์คํฌ๋กค UI๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์ ๋ค.
์ด๋ ค์ธ ๊ฒ ๊ฐ๋ค๊ณ ์๊ฐํ๋๋ฐ ๋ฐ๋๋ผ JS๋ฅผ ๋ฐ๋ณตํด์ ์ฐ๋ ํจ์ฌ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ์ดํดํ ์ ์์๋ค...์ด๊ฒ ๋ค 3์ฃผ๊ฐ์ ๊ณ ์์ด ์์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฅํ๋ค๊ณ ์๊ฐํ๋ค.
ํ๋ก๊ทธ๋๋จธ์ค KDT ์ต๊ณ ><
scroll event ์ intersection observer์ ์ ์ฉํ๋ ๊ฒ์ด ๋งค์ฐ ์ ๊ธฐํ๊ณ ์ฌ๋ฏธ์์๋ค.
๊ทธ์ ๋๋ถ์ด ๋กํ ๊ฐ์ฌ๋์ ๊ณ ์์ด ์ฌ์ง๋ค์ ๋ง๊ป ๊ฐ์ํ ์ ์์ด์ ๋ฐฐ์ฐ๋๋ด๋ด ํ๋ณตํ๋ค~๐ฑโค๏ธ ๋๋ง ์์ด ๊ณ ์์ด...
์ค๋ ์๋กญ๊ฒ ๋ฐฐ์ด ๊ฒ
๋ฌดํ ์คํฌ๋กค Ul ๊ตฌํํ๊ธฐ
- Scroll Event ๋ฐฉ์
- Intersection Observer ๋ฐฉ์
๐ ๋ฌดํ ์คํฌ๋กค UI
๋ฌดํ ์คํฌ๋กค์ด๋?
- ์ปจํ ์ธ ๋ฅผ ํ์ด์งํ๋ ๊ธฐ๋ฒ์ผ๋ก, ์๋๋ก ์คํฌ๋กค์ ๋ด๋ฆฌ๋ค๊ฐ ๋ง์ง๋ง ์์๋ฅผ ๋ณผ ๋์ฏค์ ๋ค์ ์ปจํ ์ธ ๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ ๋งํ๋ค.
๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋ ๋ฐฉ์
Window์ Scroll Event
๋ฅผ ์ด์ฉํ๋ ๋ฐฉ์Intersection Observer
๋ฐฉ์
Scroll Event
- window์ scroll event๊ฐ ์ผ์ด๋ ๋๋ง๋ค
ํ๋ฉด ์ ์ฒด์ height๊ณผ ์คํฌ๋กค์ ์์น๋ฅผ ํตํด ์ปจํ ์ธ ์ ๋์ ๋๋ฌํ๋์ง๋ฅผ ์ฒดํฌ
ํด์ ์ฒ๋ฆฌ - scroll event๊ฐ ์ผ์ด๋ ๋๋ง๋ค ํน์ ํจ์๊ฐ ๋์ํ๋ฏ๋ก
์ต์ ํ ์ฒ๋ฆฌ
๊ฐ ํ์ํ๋ค
window.addEventListener("scroll", () => {
if ( window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// ์ด๋ฒคํธ ๋ฐ์ ์ ํจ์ ๊ตฌํ
}
});
Intersection Observer
- ๋ด๊ฐ ํ๊ฒ์ผ๋ก ์ง์ ํ DOM ๊ฐ์ฒด๊ฐ ์ง๊ธ
์ฌ์ฉ์์ ํ๋ฉด์ ๋ณด์ด๋ ์์์ธ์ง ์๋์ง๋ฅผ ๊ตฌ๋ณ
ํ๋ ๋ฐฉ์ - ๊ฐ์ํ๊ณ ์๋ ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด๊ฐ๊ฑฐ๋ ๋๊ฐ ๋ ๋๋ ์์ฒญํ ๋ถ๋ถ๋งํผ ๋ ์์์ ๊ต์ฐจ ๋ถ๋ถ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํน์ ํจ์๋ฅผ ์คํํ๋๋ก ๊ตฌํ
threshold ๊ฐ
์ผ๋ก observe ๋์์ด ์ผ๋ง๋ ๋ ธ์ถ๋์ด์๋์ง์ ๋ฐ๋ผ ๋์ ์ฌ๋ถ ์ค์ ๊ฐ๋ฅobserve
๋ฅผ ์ด์ฉํด ํ๊ฒ ์์ ์ง์ ์ด ๊ฐ๋ฅํ๊ณ ,unobserve
๋ฅผ ์ด์ฉํด ํ๊ฒ ์์ ์ง์ ํด์ ๊ฐ ๊ฐ๋ฅํ๋ค
let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);
Comment
Scroll Event์ Intersection Observer์ ์ฐจ์ด๋ฅผ ์ ํํ ์๊ณ
์ํฉ๋ง๋ค ์ ์ฐํ๊ฒ ์ ์ฉํด์ผํจ์ด ์ค์ํจ์ ๋ฐฐ์ ๋ค.
๋์ ์ฌ์ง๋ค์ ์ด์ฉํด์ ํผ์ ํ์ผ๋ก ์ค์ต์ ์งํํด๋ด์ผ๊ฒ ๋ค.
๊ทธ๋ฆฌ๊ณ ์ค๋์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๋์น ๋ถ๋ถ์ด ์๋๋ก ์ธ์ธํ๊ฒ ๋
ธ์
์ ์ ๋ฆฌํ๋ฉด์ ๋์ด๊ฐ๋ค.
์ด์ ์๋ ๊ฐ์๋ฅผ ํ๋ฒ ์ญ ๋ค์ ๋ค์์ ์ดํด๊ฐ ๊ฐ์ง์๋ ๋ถ๋ถ์ ํ๋ฒ ๋ ๋ณด๋ ๋ฐฉ์์ผ๋ก ๊ณต๋ถํ์๋๋ฐ ๋๊ฐ์ง ๋ฐฉ์ ๋ชจ๋ ์ฅ๋จ์ ์ด ์๋ ๊ฒ ๊ฐ๋ค.
์ ์์ ๊ฒฝ์ฐ ์๊ฐ์ ์ค๋ ๊ฑธ๋ฆฌ์ง๋ง, ๋ด๊ฐ ํ์คํ ์ดํดํ์ง๋ชปํ ๋ถ๋ถ์ ์ ํํ ์ง๊ณ ๋์ด๊ฐ ์ ์๋ค.
ํ์์ ๊ฒฝ์ฐ๋ ๋ฐ๋ณตํด์ ๋ณด๋ค๋ณด๋ ์ดํด๊ฐ ์ ๊ฐ๊ธดํ์ง๋ง, ์ฒซ๋ฒ์งธ ๋ณผ ๋ ์ข ์ง์ค์ ๋ํ๋ ๊ฒ ๊ฐ์ ๋๋์ด๋ค.
์ฌ๋ฌ ๋ฐฉ๋ฒ์ ์๋ํด๋ณด๋ฉด์ ๋์๊ฒ ๊ผญ ๋ง๋ ๊ณต๋ถ๋ฒ์ ์ฐพ์๋ด์ผ๊ฒ ๋ค.
์ ๊ทธ๋ฆฌ๊ณ TMI์ง๋ง ๊ฐ์๋ฅผ ๋ฃ๊ณ ์ํํ๋๋ฐ ๋ชจ๋ ์๊ฐ์ ์๋ค๋ณด๋ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ์ด์ ์ํํด์ก๋คใ
ใ
ใ
๊ทธ๋์, ์น๊ตฌ๋ ๋ด์ผ๋ถํฐ 1์ผ 1์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ๊ธฐ๋ฅผ ์ค์ฒํ๊ธฐ๋ก ํ๋ค.
๊ณต๊ฐ์ ์ผ๋ก ๋งํจ์ผ๋ก์จ ๋์ ์์ง๋ฅผ ๋ถํ์ ๋ณผ ์๊ฐ์ด๋ค!!!!๐ฅ๐ฅ๐ฅ
์ฐธ๊ณ ์ฌ์ดํธ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([TIL๐ฅ] Day23(9/8)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@dasssseul/TIL-Day2398์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค