초기화 시점 수정
window.addEventListener('load', () => {
document.body.classList.remove('before-load');
document.querySelector('.loading').addEventListener('transitionEnd', (e) => {
document.body.removeChild(document.querySelector(e.currentTarget));
})
setLayOut();
})
setLayOut 함수에서 초기화 되는 설정 값들이 아직 실행이 안되서 처음 스크롤하면 바로 에러가 난다.
해결방법
window.addEventListener('load', () => {
})
window.addEventListener('resize', () => {
})
window.addEventListener('orientationchange', () => {
})
window.addEventListener('scroll', () => {
})
위 순서대로 되어있는 코드를 아래와 같이 수정한다.
window.addEventListener('load', () => {
window.addEventListener('resize', () => {
})
window.addEventListener('orientationchange', () => {
})
window.addEventListener('scroll', () => {
})
})
로딩화면일 때 맨밑에 깔려있는 body 부분 스크롤안되게하기
로딩 화면일 때 아래에 깔려있는 영역이 스크롤되는게 좀 보기 안좋다.
해결방법 - loading 중에 body 요소에 overflow: hidden 처리 (스크롤 방지)
html, body 태그에 overflow: hidden 줄 때 height: 100% 같이 안줘도 스크롤 방지된다.