인프런 커뮤니티 질문&답변
작성한 질문수
scroll-section-4에서 resizing시 화면이 깨집니다.
해결된 질문
작성
·
142
답변 4
1
소스 다시 다운받아 보시면, main.js 549라인에 해당 처리 추가해 두었습니다^^
마지막에 버그수정 부분에서 작업했던 '새로고침 후 자동 스크롤 기능'을 활용해서,
currentScene이 3일 경우 시작지점 이전으로 스크롤 되도록 했어요.
1번 방법은 그냥 정적인 요소들이 쭉-배치된 상태의 레이아웃을 말하는건데요,
예를들면 body에 simple이라는 클래스를 붙이고
<body class="simple">
.foo { position: fixed; }
.simple .foo { position: static; }
이런 식으로 simple 클래스가 붙을 경우의 CSS를 재설정해주는 방식으로 하면
크게 어렵지 않게(방법은 어렵지 않지만.. 엄청난 노가다가 필요하긴 하겠네요^^;) 만드실 수 있을 거에요.
1
한가지 방법만 알려주셔도 매우 감사하겠지만 두 가지 경우 다 알려주시면 매우매우 감사할것같아요 ㅎ
저도 이것저것 고쳐보고있는데 어렵네요...scrollTo로 scene2로 가도 깨지더라고요ㅠㅠ cavasOffsetTop 값도설정이 이상하게 되고....marginTop값 초기화 넣어보기도 했는데 되지않네요.
1
아- 마지막 섹션 요소들의 경우는 다른 섹션의 요소들과 다르게
섹션 진입 시에 요소들의 위치와 크기 등이 결정되는거라서
리사이즈에 바로 대응이 되지 않아서 그런건데요~
그래서 애플에서는 아예 레이아웃이 변하는 정도의 리사이즈를 하면
그냥 애니메이션 되지 않는 정적 레이아웃으로 변경 처리를 하고 있어요.
대응 방법은 전략에 따라 다르게 결정할 수 있을텐데,
1. 애플처럼 아예 동작을 막아버리는 방법이 있고
2. 아니면 위치나 크기의 기준을 정해줄 수 있는 위치로 강제로 스크롤 이동을 시켜줄 수도 있을 것 같고요-
다른 섹션의 요소들처럼 위치나 크기 등을 미리 정해줄 수 있는 식으로 디자인을 만드신다면
굳이 신경은 안쓰셔도 되는 부분이라 일단 응용해서 다른 작업을 만드실 때 큰 지장은 없을거에요^^;
2의 방법을 잘 쓰면 동작을 막지 않고도 해결이 가능할 것으로 생각되어서,
저도 작업해보고 다시 피드백 드릴게요!
0