๋ฐ˜์‘ํ˜•

react scrollbar useRef 1
[React] div scroll ๋งจ ์œ„๋กœ ์˜ฌ๋ฆฌ๊ธฐ / scroll ์ปจํŠธ๋กค ํ•˜๋Š” ๋ฐฉ๋ฒ• (useRef ์‚ฌ์šฉ)

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” React scroll ์Šคํฌ๋กค์„ ์ปจํŠธ๋กคํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. My case ์ €์˜ ๊ฒฝ์šฐ ์ปดํฌ๋„ŒํŠธ ํ™”๋ฉด์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌ์„ฑ๋˜์–ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒŒ์‹œ๊ธ€ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์žˆ๊ณ , ํŠน์ • ๊ฒŒ์‹œ๊ธ€์„ ํด๋ฆญํ•˜๋Š” ์ˆœ๊ฐ„ ํŠน์ • ๊ฒŒ์‹œ๊ธ€์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด ๋ณด์ด๊ณ , ์•„๋ž˜๋กœ ๋‹ค๋ฅธ ๊ฒŒ์‹œ๊ธ€๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์‹  ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก ์ค‘ ํ•˜๋‚˜๋ฅผ ํด๋ฆญํ•˜๋ฉด, ๋ณธ๋ฌธ ๋‚ด์šฉ์ด ๋ณ€ํ•˜๋Š” ํ˜•์‹์ž…๋‹ˆ๋‹ค. How to solve the problem 1. ๋Œ€์ƒ div์— ref๋ฅผ ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. const postDetailRef = useRef(null); 2. ์ •์˜ํ•œ ref ๊ฐ’์„ div tag์— ํ• ๋‹นํ•ด์ค๋‹ˆ๋‹ค. {postDetail && ( {postDetail.title} {..
Framework/React 2023.03.06
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”