반응형

react scroll 3

React div 스크롤시 Fix 하기 (Element scroll)

이전에 window에서 스크롤할 때 특정 엘레멘트가 고정이 되는 기능을 구현했습니다. 이번에는 window가 아닌 특정 div 에서 스크롤했을 때 div안의 다른 객체가 고정이 되도록 구현해 보겠습니다. 사실 구현 방식은 똑같습니다. 단지 window 와는 달리 객체의 scroll 값을 구하기 위해서는 useRef를 사용해야 합니다. 저도 이 부분을 구현하는데 있어 많은 공부가 되었습니다. 😁 객체에서 고정을 시키려면 fixed 와는 달리 absolute를 사용해야 합니다. 그리고 위치의 기준이 viewport 가 되는 fixed와 다르게 absolute는 상위 객체들 중 relative가 되는 값을 참조하여 위치가 결정됩니다. 그래서 제가 생각한 방법은 2가지 입니다. 거의 같으면서도 활용성이 조금 다..

개발 🐾/ReactJS 2021.06.11

React 스크롤시 Fix 하기 (Window scroll)

스크롤바를 어느 값만큼 내리면 특정 엘레먼트의 css 속성이 변경되어야 하는 경우가 종종 있습니다. 우선 해당 환경을 만들기 위해 마크업을 합니다. Window가 아닌 div 스크롤인 경우 - App.js 'I will be fixed! 😘' Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at ..

개발 🐾/ReactJS 2021.06.08

React Hook 에서 Scroll 컨트롤 하기! top버튼 구현

How can I make a Top Button, click to scroll to the top ?! 서비스용 홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤 입니다. 처음에는 무조건 ref 를 사용해서 컨트럴 해야 한다고 생각했었는데, 어쨌든 리액트도 자바스크립트다 보니 꼭 그렇지만은 않더라구요. useEffect에서 addEventListener를 걸어주고 removeEventListener로 clean-up을 해주기만 하면 되더라구요. 생각보다 간단하게 구현 할 수 있었습니다. 다음과 같이 클릭하면 페이지 최상단으로 스크롤 되는 기능을 구현해 보고자 합니다. 우선 구조를 잡아보겠습니다. TOP Fixed Scroll Top Lorem ipsum dolor sit amet consect..

개발 🐾/ReactJS 2021.02.09
반응형