`scroll-padding` 또는 `scroll-margin`를 사용해서 해결하는 방법이 있습니다. 스크롤 컨테이너에는 `scroll-padding`을, 컨테이너 내 엘리먼트에는 `scroll-margin`을 사용하시면 됩니다. 예를 들어 이동하려는 콘텐츠에 ``` .article { scroll-margin-top: 10px; } ``` 요렇게 적용하고 아래처럼 `scrollIntoView`를 실행하면 ``` const el = document.querySelector(".article"); el.scrollIntoView({block: "start", behavior: "smooth"}); ``` 뷰포트의 위쪽 border가 엘리먼트의 위쪽 border와 정렬되도록 뷰포트가 스크롤되지만 10픽셀의 추가 공간이 생깁니다. 10픽셀은 예시이며, GNB의 실제 height 만큼 주시면 해당 픽셀만큼 여유 공간을 만들 수 있으실거에요. 단, 해당 속성은 Safari 14.1부터 사용 가능하므로 프로젝트에서 해당 버전에 대한 호환성 여부를 만족하는지 꼭 체크해주세요.

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 3월 12일 오전 9:30

댓글 0

    함께 읽은 게시물

    🎯 유튜브에 100번째 코딩 테스트 문제 풀이 영상을 올렸습니다!

    ... 더 보기

    달레의 코딩 테스트

    www.youtube.com

    달레의 코딩 테스트

    간밤에 또 빅 AI 업데이트가 있었군요. Claude 4 Opus, Sonnet 패밀리가 발표되었습니다.


    성능이나 다양한 능력이 향상되었고, 트렌드에 맞게(?) 소프트웨어 개발 성능이 또 크게 올랐습니다.


    ... 더 보기

    조회 1,621


    프론트엔드 개발자 지망생 군 복무에 대한 고민

    안녕하세요 저는 19살 고등학생입니다. 먼저 다룰줄 아는 언어는 기본적으로 JavaScript,CSS,HTML 입니다. 내년에 졸업 예정입니다. 저는 대학 진학에는 관심이 없고 바로 취업을 하고 싶습니다. 근데 군 복무나 이런 거 때문에 좀 생각이 많아져 글 남겨봅니다.

    조회 33


    한때 천만원에 거래되었던 Manus, Bedrock 무료 오픈소스로 공개

    ... 더 보기

    LinkedIn

    lnkd.in

    LinkedIn