scroll-section-4에서 resizing시 화면이 깨집니다.

Question

scroll-section-4의 마지막 스크롤 화면에서 작은 화면 -> 큰화면 resizing 후 스크롤하면 이미지 위치가 뒤죽박죽되며 깨집니다. 막강까지 들으면 버그 수정이 있나 했는데 없더라고요..ㅠㅠ

1분코딩 · Answer

소스 다시 다운받아 보시면, main.js 549라인에 해당 처리 추가해 두었습니다^^ 마지막에 버그수정 부분에서 작업했던 '새로고침 후 자동 스크롤 기능'을 활용해서, currentScene이 3일 경우 시작지점 이전으로 스크롤 되도록 했어요.  1번 방법은 그냥 정적인 요소들이 쭉-배치된 상태의 레이아웃을 말하는건데요, 예를들면 body에 simple이라는 클래스를 붙이고 <body class="simple"> .foo { position: fixed; } .simple .foo { position: static; } 이런 식으로 simple 클래스가 붙을 경우의 CSS를 재설정해주는 방식으로 하면 크게 어렵지 않게(방법은 어렵지 않지만.. 엄청난 노가다가 필요하긴 하겠네요^^;) 만드실 수 있을 거에요.

들꽃 · Answer

한가지 방법만 알려주셔도 매우 감사하겠지만 두 가지 경우 다 알려주시면 매우매우 감사할것같아요 ㅎ 저도 이것저것 고쳐보고있는데 어렵네요...scrollTo로 scene2로 가도 깨지더라고요ㅠㅠ cavasOffsetTop 값도설정이 이상하게 되고....marginTop값 초기화 넣어보기도 했는데 되지않네요.

1분코딩 · Answer

아- 마지막 섹션 요소들의 경우는 다른 섹션의 요소들과 다르게 섹션 진입 시에 요소들의 위치와 크기 등이 결정되는거라서 리사이즈에 바로 대응이 되지 않아서 그런건데요~ 그래서 애플에서는 아예 레이아웃이 변하는 정도의 리사이즈를 하면 그냥 애니메이션 되지 않는 정적 레이아웃으로 변경 처리를 하고 있어요. 대응 방법은 전략에 따라 다르게 결정할 수 있을텐데, 1. 애플처럼 아예 동작을 막아버리는 방법이 있고 2. 아니면 위치나 크기의 기준을 정해줄 수 있는 위치로 강제로 스크롤 이동을 시켜줄 수도 있을 것 같고요- 다른 섹션의 요소들처럼 위치나 크기 등을 미리 정해줄 수 있는 식으로 디자인을 만드신다면 굳이 신경은 안쓰셔도 되는 부분이라 일단 응용해서 다른 작업을 만드실 때 큰 지장은 없을거에요^^; 2의 방법을 잘 쓰면 동작을 막지 않고도 해결이 가능할 것으로 생각되어서, 저도 작업해보고 다시 피드백 드릴게요!

들꽃 · Answer

아...하하 심플한 방법이지만 먼길이었군요 ㅎ답변감사합니다