scroll-margin-top
1. 문제 상황
- element.scrollIntoView() 메소드를 사용하여 특정 dom으로 스크롤을 이동하는 상황에서 네비게이션바의 position이 fixed이면 스크롤이 이동한 dom의 상단 부분이 네비게이션바에 깔리는 형상이 발생한다.
2. 해결 방법
var node = 'select your element';
var yourHeight = 'height of your fixed header';
// scroll to your element
node.scrollIntoView(true);
// now account for fixed header
var scrolledY = window.scrollY;
if(scrolledY){
window.scroll(0, scrolledY - yourHeight);
}위 코드처럼 네비게이션 바의 높이만큼 스크롤을 움직여주는 방법도 있지만,
scroll-margin-top CSS 속성을 이용하면 쉽게 문제를 해결 할 수 있다.
scroll-margin-top 메소드는 이 상자를 스냅포트에 스냅하는 데 사용되는 스크롤 스냅 영역의 위쪽 여백을 정의한다고 나와있다. 해당 메소드를 사용하면 네비게이션바에 깔라지않고 스크롤을 이동할 수 있다.
<참고자료>
성욱