scrollTo, scrollBy, scrollIntoView 스크롤 제어_
scrollBy : 현재 스크롤 위치를 기준으로 제어. (상대값)
- scrollBy(10px, 20px) 현재 스크롤이 위치한 곳에서 가로로 10px, 세로로 20px만큼 스크롤 이동
scrollTo : 브라우저의 top, left를 기준으로 스크롤 제어 (절대값)
- scrollBy(0, 20) 브라우저의 left, top에서 20px만큼 세로 스크롤 이동.
- scrollBy(20, 0) 브라우저의 left, top에서 20px만큼 가로 스크롤 이동.
scrollIntoView : 해당 요소가 보이는 위치로 스크롤 이동
인수로 받은 값이 true면 요소의 top을 기준, false면 요소의 bottom을 기준으로 이동 (기본값은 true)
- box.scrollIntoView(true) : box의 top이 브라우저 top에 닿는 위치(즉, 요소가 보이는 위치)로 스크롤 이동
- box.scrollIntoView(false) : box의 bottom이 브라우저 bottom에 닿는 위치로 스크롤 이동
스크롤 정보 얻기
window.pageYOffset
세로 스크롤에 의해 가려진 위쪽 영역 높이
window.pageXOffset
가로 스크롤에 의해 가려진 왼쪽 영역 너비
pageXOffset, pageYOffset
스크롤한 x, y 거리
scrollX, Y
스크롤한 x, y 거리
'JavaScript' 카테고리의 다른 글
| [JavaScript] DOM의 구조(DOM 트리) (0) | 2022.12.14 |
|---|---|
| [JavaScript] 브라우저와 호스트 환경 (0) | 2022.12.14 |
| [JavaScript] 기하 프로퍼티(geometry property) _more (0) | 2022.12.14 |
| [JavaScript] 마우스 좌표 (0) | 2022.12.13 |
| [JavaScript] 폼 요소의 이벤트와 메서드 (0) | 2022.12.13 |