-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
우측의 navigator 클릭 시 이동하는 곳에 대해 질문이 있습니다
21.04.06 17:34 작성 조회수 141
0
안녕하세요~ 강의를 듣다가 질문이 있어서 여쭤봅니다 : )
우측의 navigator 를 클릭할 때 원하는 top 에 가고 싶은 게 문제인데요,
현재는 scrollTo 의 top 값이 각 섹션의 offsetTop 으로 지정이 되어 있어서 섹션이 시작하는 상단으로 이동을 하잖아요~
그런데 이 부분을 scroll 할 때처럼 화면의 절반이 지났을 경우의 위치로 오게 할 수 있는.. 좋은 방법이 있을까요?
일단 제가 테스트를 해본건
1) 각 섹션의 offsetTop 값에 윈도우 창의 높이 1/2값을 빼주는 방법 -> 섹션 중간에 멈춰서 뭔가 부자연스러워 보여서 패스했어요.
window.scrollTo({
top: section[pageNum].offsetTop - window.outerHeight/1.5,
behavior: 'smooth'
});
2) offsetTop 값에 img 높이값만큼 고정값을 선언하여 빼주는 방법 -> 원하는 높이로 이동하지만, 고정값으로 선언한거라 유연하게 대응이 불가능할 것 같다는 생각입니다.
window.scrollTo({
top: section[pageNum].offsetTop - 258,
behavior: 'smooth'
});
혹시 이럴 경우.. img 높이값을 변수로 받아와서 유동적으로 처리를 해주면 되는걸까요? ... 질문을 하다가 정리가 된 것 같은데 😅 다른 좋은 방법이 있을까요~??
답변을 작성해보세요.
1
코딩일레븐
지식공유자2021.04.07
안녕하세요.
질문을 하시다가 정리가 되신 것 같습니다. ㅋ
아시다시피 보내고 싶은 top 값을 가져와서 scrollTo의 top 값에 넣어주면 되는겁니다.
일단 section[pageNum].querySelector("이미지").offsetTop 으로 보내주면 되겠죠.
var img = section[pageNum].querySelector("이미지");
var moveTop = img.offsetTop - img.height /2
이런식으로 해보셔도 되고요.
답변 1