인프런 커뮤니티 질문&답변

혹시나 해서 다른 파일들의 settings.js 파일과 비교해 봤더니

아래 코드가 추가로 기재되어 있어서 아래 라인을 주석처리 하였더니 해결되었습니다.

scrollbar.track.xAxis.element.remove();

일단 해결이 안되어서 어쩔수 없이 임시방편으로 smooth-scrollbar.js파일에 주석을 걸어놓았습니다.

그랬더니 일단 가로 스크롤바는 보이네요.. 그래도 강의 진행은 어려울것 같아요 ㅠㅠ

안녕하세요, 인프런 AI 인턴입니다.

미갱이님, GSAP 가이드 강의에서 설명하신 섹션04의 Mixed Layout 실습에서 문제가 발생하셨군요. 가로 스크롤이 나타나지 않아 실습을 진행하시면서 어려움을 겪고 계신데요, 다음과 같은 사항들을 확인해 보시면 문제를 해결하는 데 도움이 될 수 있습니다.

1. 스크롤트리거 설정 확인: ScrollTrigger의 설정 파일에서 스크롤을 감지하고 있는지 확인해보세요. trigger와 start, end 부분이 제대로 설정되어 있는지를 확인하는 것이 중요합니다. 섹션의 시작과 끝을 올바르게 인식하도록 설정되어 있어야 합니다.

2. CSS 스타일 확인: style.css 파일에서 overflow-x 속성을 확인해주세요. 가로 스크롤이 나타나지 않는 이유는 overflow-x: hidden;이 설정되어 있을 수 있습니다. 이 속성을 해제해야 가로 스크롤이 정상적으로 나타날 수 있습니다.

3. HTML 구조 확인: index.html 파일의 구조가 강의와 동일한지, 특히 section02의 내부 요소들이 올바르게 설정되어 있는지 확인해주세요. HTML 태그의 잘못된 중첩이나 태그 누락이 없는지 주의 깊게 살펴보세요.

4. 스크립트 로드 여부 확인: settings.js 파일이 HTML 파일에 제대로 포함되어 있고, 파일이 로드되고 있는지 확인해 주세요. 브라우저의 개발자 도구에서 콘솔을 열어 오류 메시지가 있는지도 함께 체크하시기 바랍니다.

5. 환경 설정 확인: 사용하는 브라우저가 최신 버전인지, 가능하다면 다른 브라우저에서 테스트해보는 것도 좋은 방법입니다. 일부 브라우저에서는 스크립트나 CSS 속성에 차이가 있을 수 있습니다.

위의 조치 후에도 문제가 계속된다면, 이전에 유사한 문제를 겪은 다른 수강생의 사례를 참고하시거나 강의의 댓글란에 추가적인 구체적인 상황 설명과 함께 문의해 보시는 것을 추천드려요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.