중간부분 새로고침
중간부분에서 새로고침하면 다른위치로 뜬다.
이 부분을 해결해야된다.
많은 사이트에서 이 부분을 해결하기가 껄끄러운 건지는 몰라도 강제로 맨 위로 보내는 경우가 많다.
하지만 여기선 이 문제를 해결해보겠다.
원인
새로고침 직후 스크롤 이벤트가 실행이 안되니까 에러가 나는 것이다.
새로고침시 발생하는 작업들은 다음과 같다.
- 새로고침
- 각 영역들 원래 가지고있는 컨텐츠의 높이만큼 높이가 설정된다.
- 이 이후 자바스크립트로 높이가 재설정된다.
0, 2, 3 섹션은 나중에 자바스크립트로 높이가 재설정되고, 1섹션(인터렉션 없는 섹션)은 처음부터 가진 높이를 바로 쓰는데 처음엔 모든 섹션이 처음부터 가진 높이로 인지되기 때문에 발생하는 문제다.
debugger;
debugger 활용한다.
브라우저는 코드를 실행하다가 debugger 시점에서 코드를 일시정지한다.
그리고 재생을 누르면 그 다음 줄부터 한줄한줄 실행한다.
이를 통해 코드 디버그를 할 수 있다.
해결방법
아예 자바스크립트 적용되기 이전에도 height 값을 못잡게 컨텐츠들을 다 사라지게 했다가 setLayout() 함수 실행될 때 같이 영역이 잡히도록 한다.
.before-load .container {
display: none;
}