[CSS] scrollIntoView를 사용하면 바운싱되는 이유(with. position의 차이)
0. 들어가며…scrollIntoView()는 특정 요소를 화면에 보이도록 자동으로 스크롤해주는 API이다.주로 사용자가 선택한 항목이나 포커스된 입력창이 가려지지 않도록 하기 위해 사용한다.하지만 이 편리한 기능을 position: absolute로 구현된 요소에 사용하면, 의도와 달리 배경 페이지가 갑자기 튀는 듯한 '바운싱(Bouncing)' 현상을 마주할 때가 있다.가령, position: absolute로 구현된 바텀시트(화면 하단에서 올라오는 팝업)가 있다고 가정해보자.이 바텀시트 안에는 스크롤 가능한 영역이 있고, 사용자가 그 안의 입력창을 클릭하면 키보드가 올라오면서 scrollIntoView()가 호출된다.우리의 기대는 바텀시트 내부 스크롤이 입력창으로 부드럽게 이동하는 것이지만, 현실은..
2025. 6. 22.
