Aesop 클론코딩 스크롤 이슈

에러

1. header안에 main-menu를 클릭하면 navigation이 활성화됩니다.

2. navigation이 활성화 되면 body부분의 scroll-y를 숨깁니다.

2. 스크롤을 내릴땐 header가 숨겨지고 스크롤을 올리면 header가 화면밖에서 아래로 내려옵니다.

3. ⚠️에러 발생: 스크롤을 충분히 내린 이후 스크롤을 살짝 올려 header가 활성화되면 .main-menu안에 li를 누르면 스크롤업할땐 top: 0;에 고정되어 있어야 할 header가 사라집니다.

4. 테스트 해본 결과: 메뉴를 눌러서 overflow:hidden 옵션이 body 에 들어가면, 스크롤이 1px~4.5px 정도 강제로 이동 하면서 header 를 숨기는 스크롤 이벤트가 작동하는 게 원인이었습니다.

5. reset.css로 body의 마진이나 보더를 초기화해도 / image 나 video 태그에 display: block 로 지정해도 / css 파일을 삭제해도 해당 문제가 발생했습니다.

조치

1. 해결방법은 두가지 였는데 overflow:hidden 옵션을 body에 주지 않으면 문제가 해결됐습니다.

2. 다른 방법은, contents영역의 모든 img와 video에 퍼센티지(%)가 아닌 px값으로 너비를 고정하면 해결됩니다.

❓질문

1. body 영역의 overflow: hidden과 .contents영역의 박스들의 퍼센티지(%)와 무슨 상관이 있나요?

2. 화면 해상도에 따라 레이아웃이 무너지지 않게 하기 위해(동적으로 하기위해) 레이아웃을 구성하는 거의 모든 박스에 px값이 아닌 퍼센티지(%)로 너비값을 지정했는데 이럴 경우엔 미디어 쿼리로 일일히 img와 video태그들에 px값을 주어 조절하는 방법을 택해야 하나요?

❗답변

헤더의 버튼을 누르면, <body>에 overflow-y: hidden이 적용되면서 우측에 스크롤바가 사라지죠.
그러면 화면이 우측으로 살짝 커지면서 퍼센트 너비로 적용된 이미지 크기가 바뀝니다.
그러면 이미지 크기가 바뀌면서 스크롤이 살짝 움직이고, 그 움직임이 nextScrollTop에 영향을 주면서 nextScrollTop 값이 prevScrollTop 값보다 커져서 헤더가 사라지는 문제입니다.

위의 답변에 힌트를 얻어 맨 오른쪽에 생기는 스크롤 너비 값에 따라 화면이 움직이면서 scrollY 값이 변경되기 때문에 header가 없어지는 것이 아니라 스크롤을 아래로 내리면 header가 위로 올라가는 것처럼 브라우저가 스크롤을 내리는 것으로 인식해 header가 위로 올라가 버린다는 것을 알았습니다.

그래서 scrollY값이 변경되지 않게 고정하는 방법을 찾기 시작했고, 결과는 body가 overflow:hidden;이 될 때마다 body부분에 스크롤 너비값만큼 padding-right를 주어 스크롤이 없어지는 것을 인식하지 못하도록 하였습니다.

  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

저작자표시 비영리 변경금지 (새창열림)

'Error Note > Resolved' 카테고리의 다른 글

Minified React error #130 (0)	2023.04.26
목록 자동화 출력 (0)	2022.10.31

에러

조치

❓질문

❗답변

'Error Note > Resolved' 카테고리의 다른 글

검색 태그

티스토리툴바