절망할 시간이 있으면

혜진·2023년 7월 18일
0

요즘 제일 좋아하는 말


1. scrollTop()

  1. .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정한다.
  2. 화면상에서 내가 스크롤한 만큼의 거리를 알아내기

✏️문법

$( 'div' ).scrollTop( ); : div 요소의 스크롤바 수직 위치를 가져온다.

.scrollTop( value ) : div 요소의 스크롤바 위치를 위에서 value 만큼의 값으로 정한다.

✏️ 예시1

(' @@@ ').click(function(){('window').scrollTop(0)}
1.@@@를 클릭하면
2. window 제일 상단으로(scrollTop(0))으로 이동

✏️ 예시2

('@@@').click(function(){('window').scrollTop(100).scrollLeft(200);}
1. @@@를 클릭하면
2. window 상단 100px, 좌측 200px으로 이동


2. offset()

  1. .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킨다.
  2. 화면상에서 특정 요소의 y축 위치 알아내기

✏️문법

.offset() : 선택한 요소의 좌표를 가져온다.
> var jb = $( 'h1' ).offset(); : h1 요소의 좌표를 변수 jb에 저장한다.

.offset( coordinates ) : 선택한 요소를 특정 위치로 이동시킨다.
> $( 'h1' ).offset( { left: 100, top: 50 } ) : h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킨다.

차이를 잘 알아야 스크롤 이벤트할 때 적용할 수 있겠지?
더 여러 군데에서 알아보고 주말에 적용해봐야지

profile
매일 하는 것보다 중요한 건 그럼에도 불구하고 그만두지 않는 것

0개의 댓글