Tag Archives: viewport

Prototype Javascript Framework – document.viewport

이번에는 문서의 크기와 스크롤 정보를 가져오는 방법을 알아보겠습니다.
문서의 크기와 스크롤 정보를 가져오는 방법은 브라우저마다 틀리고 또 처리하기가 나름 어려운 면이 있습니다.
하지만 Prototype의 메서드를 이용하시면 깔끔하게 이용하실 수 있습니다.

document.viewport Methods ————————————————————————————–

getDimensions : 화면에 보이는 영역의 크기값을 가져옵니다.
[code]document.viewport.getDimensions() -> { width: Number, height: Number }[/code]

예제)
[code]document.viewport.getDimensions();
//-> { width: 776, height: 580 }[/code]

getHeight : 화면에 보이는 영역의 세로 크기값을 가져옵니다.
[code]document.viewport.getHeight() -> Number[/code]
document.viewport.getDimensions().height 와 동일합니다.

getWidth : 화면에 보이는 영역의 가로 크기값을 가져옵니다.
[code]document.viewport.getWidth() -> Number[/code]
document.viewport.getDimensions().width 와 동일합니다.

getScrollOffsets : 보이는 화면 영역의 스크롤 위치 값을 가져옵니다.
[code]document.viewport.getScrollOffsets() -> [Number, Number] also accessible as { top: Number, left: Number }[/code]

예제)
[code]document.viewport.getScrollOffsets();
//-> { left: 0, top: 0 }


window.scrollTo(0, 120);


document.viewport.getScrollOffsets();
//-> { left: 0, top: 120 }[/code]