inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

배너 형식 페이징 - 스크롤 애니메이션

scrollTo 완성본

603

비타민걸

작성한 질문수 14

0

 scrollTo - 페이지 스크롤 부분

완성본 자체가 작동이 안되네요

크롬브라우저에서 상하 이동 자체가 안되네요 ..

복사해서 붙여넣기 해도요

왜그런건가요?

다음 페이징 스크롤 이동.html 완성본도

크롬 브라우저에서 작동 안합니다

콘솔 이거맞죠?

console.log(scrollTo());

이렇게 하면 아래와같이 나옵니다


 

아래 저와 같은 분이 있어

https://codepen.io/yahao2512/pen/jOmKgGo\

여기서 확인해보니

이동은 하나

크롬에서는 behavior: 'smooth',

이게 안되는것 같아요 ~~

인터랙티브-웹 인터랙티브-웹 javascript

답변 2

0

비타민걸

콘솔 하면 잘 찍힙니다

console.log(window.scrollY)

https://codepen.io/yahao2512/pen/jOmKgGo\

여기 확인해보니

이동은 안하고 top 누르면 텍스트 content1 나오고

bottom 누르면 텍스트 content1나와요

이동은 안합니다

 

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

여기들어가니 스크롤바가 이동은 하나

scroll-behavior: smooth;가 안먹혀서 인지

딱딱하게 이동만해요

scroll-behavior: auto;랑

scroll-behavior: smooth; 둘다 똒같이 딱딲하게 스크롤바만 이동해요 ...ㅠㅠ

 

 

 

 

 

0

코딩일레븐

아래 url도 안 된다고 하시니 난감하네요.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

css에 아래 코드 추가해보세요.

html {
  scroll-behavior: smooth;
}

 

 

0

코딩일레븐

안녕하세요

확인을 다시 해봐도 저는 맥북 크롬, 사파리에서 확인 시 잘 되고 있습니다.

그리고 console.log(scrollTo()) 는 scrollTo() 가 없어서 undefined 가 나오는 게 맞습니다.

console.log(window.scrollY) 를 해보세요.

그리고 아래 url 은 제가 만들어 놓은 것입니다. 제가 yahao2512입니다.

https://codepen.io/yahao2512/pen/jOmKgGo\

 

이 페이지도 한 번 보시고 테스트 해보세요.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

위 url은 되시는지 답변 부탁드립니다.

 

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

0

402

2

레퍼런스 사이트

0

339

1

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

0

267

1

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

0

380

1

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

0

675

1

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

0

459

1

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

0

386

1

css 질문 드립니다

0

624

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

527

1

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

0

193

1

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

0

371

1

화살표 회전 질문

0

262

1

질문이용~

0

218

1

파일명 한글시 live Server 작동안함

1

213

1