문제발생 : 검색창 보기의 리스트 아이템을 keyDown키로 하나씩 이동하는데 해당 overflow로 가려진 시점부터 리스트 아이템의 타겟은 계속 내려가지만 스크롤이 그대로 있어서..
해결
scrollHeight : 스크롤에 가려진것 포함 모든 높이 (사진에 리스트를 포함하는 전체 ul)
clientHeight : 눈에 보여지는 요소의 높이 (사진에 보여지는 리스트만 포함하는 ul)
offsetHeight : border + padding을 포함한 요소의 높이
offsetTop : 가까운 부모에 대한 상대적 픽셀 높이
구성환경(Next.js, Typesciprt)
1. 전체를 감싸는 ul에 useRef훅을 사용하여 clientHeight를 받아온다.
2. 자식요소의 li에 useRef훅을 사용하여 offsetTop, offsetHeight를 받아온다.
ex) 1번 311px , 2번 offsetTop: 29px, offsetHeight: 34px(각 li의 박스 높이(border, padding을 포함한)라고 생각하면됨)
offsetTop + offsetHeight를 하게 되면 사진에 파란색 테두리의 밑부분 즉 경계선 끝지점의 height 위치를 알수있게 되므로
1번 clientHeight보다 2번의 요소들을 더한값이 크게 되는 순간부터 스크롤 화면에 안보이게 되는 지점이 되는것이다.
이 경계점을 파악하여서 if문을 통한 scroll이벤트 분기문을 걸어서 스크롤을 이동하게 하여 해결.
(고1일때 1번 311px 2번 315px로 4px만큼 안보이게 되므로 4px를 ul의 Ref속성의 scrollTop에 더해주면 된다.)
이렇게 직접 구현하지 않고 스크롤이나 키이벤트관련해서 더 쉬운방법은 라이브러리 downShift를 사용하면 되는데 다른 추가적인 기능과 복합적으로 사용해야될 상황이 있어서 직접 만들게 되었다.
downshift는 https://www.npmjs.com/package/downshift 여기서 확인해볼수 있다 (정말 유용한것 같다!)
