top button구현 TIL

검색리스트 프레임

만약 유저가 은행을 검색하게 된다면 저런식으로 리스트가 뜨게 되는데 회색창 안에서 움직이기 때문에 밑에다가 top버튼을 만들어 주어야했다. 버튼은 리스트의 밖에 있는데 리스트의 상단으로 가게하려면 어떻게 해야할까 고민했다.

 

1.내가 만난 문제

평소처럼 웹에서 스크롤을 하면 탑 버튼이 생기는 형식이 아니였고,

버튼은 고정이였지만 대신 올라가야 할 위치가 버튼과 동일한 위치의 선상이 아니였다. 그래서 이걸 어떻게 해야할까 고민이였다.

 

2.시도

처음에는 저 리스트를 내리면 그 리스트 안에서 버튼이 형성되는 것은 어떠할까?라고 생각했는데 그럼 리스트를 누르려다가 버튼을 실수로 누를 수도 있는 상황이 생길 것 같았고 또 틀 안에서만 움직이는 리스트들이 답답해 보일껏 같은 생각이 들었다.

만들어 놓은 프레임을 따라가기 위해서 좀 더 찾아볼 필요가 생겼다.

 

3.해결

useRef로 top으로 갈 상단 지점을 만들어 주었다.

그리고 onTop이라는 함수를 만들어 topLocation의 현재위치로 갈 수 있도록 했다.

ref로 위치지정을 해주고 => 여기는 리스트의 상단에다가 아무것도 없는 div를 하나 만들어줘서 위치를 지정해주었다.

 

버튼을 만들어서 onTop함수를 실행해준다.

아주 잘 올라가는것을 확인!

끝😎