자바스크립트 완벽 가이드

JavaScript

526

15장 웹 브라우저의 자바스크립트

scrollIntoView()

에

behavior:"smooth"

프로퍼티가 있는 객체를 전달해 부드러

운 스크롤을 만들 수 있습니다.

block

프로퍼티를 써서 세로 위치를 정할 수 있고,

가로 스크롤이 필요하다면

inline

프로퍼티로 지정할 수 있습니다. 두 프로퍼티의

유효한 값은

start

,

end

,

nearest

,

center

입니다.

15.5.5

󻊿󼢻󼞇󽴔󼔻󺋿󼐧󼘟󼋯󽴔󼔻󺋿󻝳󼔻󺴳󽴔󻯓󼌧

이미 설명했듯 브라우저 창뿐만 아니라 HTML 요소에도 스크롤 바가 표시될 수 있

습니다. 이런 경우 뷰포트 크기, 콘텐츠 크기, 뷰포트 안에 있는 콘텐츠의 스크롤

오프셋을 알아야 할 때도 있습니다.

브라우저 창의 뷰포트 크기는

window.innerWidth

,

window.innerHeight

프로퍼

티로 알 수 있습니다. 모바일 장치에 최적화된 웹 페이지는

<head>

에

<meta name

="viewport">

태그를 써서 원하는 뷰포트 너비를 설정할 때가 많습니다. 문서의 전

체 크기는

document.documentElement

, 즉

<html>

요소의 크기와 같습니다.

document

.documentElement

의

getBoundingClientRect()

를 호출하거나

document.document ...