inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

인터랙티브 개발 실무 끝장내기 [역량 강화편]

[실습] 나이키 운동화 사이트 구현

우측의 navigator 클릭 시 이동하는 곳에 대해 질문이 있습니다

해결된 질문

222

티라미수

작성한 질문수 7

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 높이값을 변수로 받아와서 유동적으로 처리를 해주면 되는걸까요? ... 질문을 하다가 정리가 된 것 같은데 😅 다른 좋은 방법이 있을까요~?? 

인터랙티브-웹 javascript

답변 1

1

코딩일레븐

안녕하세요. 

질문을 하시다가 정리가 되신 것 같습니다. ㅋ

아시다시피 보내고 싶은 top 값을 가져와서 scrollTo의 top 값에 넣어주면 되는겁니다.

일단 section[pageNum].querySelector("이미지").offsetTop 으로 보내주면 되겠죠.

var img = section[pageNum].querySelector("이미지");

var moveTop = img.offsetTop - img.height /2

이런식으로 해보셔도 되고요.

모바일 스와이프 구현 마지막 숙제

0

402

2

레퍼런스 사이트

0

339

1

스크롤위치에 따른 페이지 변화에서

0

267

1

배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?

0

380

1

스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문

0

675

1

페이징.페이지고정2 질문드립니다.

0

459

1

scrollTo 완성본

0

603

2

모바일 3D 입체 카드 제작 아이폰에서 에러

0

386

1

css 질문 드립니다

0

623

1

css 질문

0

284

1

pointBtn.addEventListner("click")

0

305

2

if문의 첫번째 조건 질문 있습니다~

0

285

1

offsetTop, offsetHeight

0

785

2

기존의 축 회전값에 더해서 rotate

0

320

1

모바일 드래그 강의 질문드립니다!

0

256

1

질문입니다.

0

215

1

GSAP(트윈맥스) 라이센스 관련 질문 드립니다.

0

1657

1

wrap 안에 click 이벤트

0

225

1

greensock을 사용하려면

0

701

1

TweenMax 효과 리셋

0

524

1

max 이상으로 입력했을 때 질문입니다.

0

192

1

dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해

0

370

1

화살표 회전 질문

0

261

1

질문이용~

0

217

1