Como pegar dimensões da janela e da barra de rolagem por javascript

Isso seria efetivamente fácil, se todos os browsers seguissem o padrão da ECMA… mas não é assim que funciona, e ontem um dos meninos que trabalha aqui comigo estava tentando implementar um código javascript que utiliza tanto a altura útil da tela, como a altura visível da janela (window) e a posição das scrollbars.

Papo vai, papo vem, procura na API da Prototype aqui, da jQuery ali, abre o Google acolá… e me deparo com uma página muito completa, que lista os browsers (inclusive por sistema operacional) e qual é o objeto e atributo que está disponível nele.

browser platform mode window.innerWidth
window.innerHeight
window.pageXOffset
window.pageYOffset
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.clientWidth
document.body.clientHeight
document.body.scrollLeft
document.body.scrollTop
IE Win32 w. DTD undef
undef
undef
undef
ok
ok
ok
ok
doc. width
doc. height
0
0
IE Win32 w/o. DTD undef
undef
undef
undef
0
0
0
0
ok
ok
ok
ok
IE Mac all undef
undef
undef
undef
undef
undef
undef
undef
ok
ok
ok
ok
Firefox Win32/Mac w. DTD +scroller
+scroller
ok
ok
ok
ok
ok
ok
ok
doc. height.
ok
ok
Firefox Win32/Mac w/o. DTD + scroller
+scroller
ok
ok
doc.width
doc.height
0
0
ok
ok
ok
ok
Netscape Win32 w. DTD + scroller
+scroller
ok
ok
ok
ok
ok
ok
ok
doc. height.
ok
ok
Netscape Win32 w/o. DTD + scroller
+scroller
ok
ok
0
0
0
0
ok
ok
ok
ok
Opera Win32/Mac all + scroller
+scroller
ok
ok
ok
doc.height
ok
ok
ok
ok
ok
ok
Safari Mac all ok
ok
ok
ok
ok
doc.height
0
0
ok
doc.height
ok
ok

Ou seja, não existe um método que funcione para todos os browser… :(

Mas, o autor criou uma implementação cross-browser que funciona para calcular todos esses atributos (altura e largura da janela, posição da scrollbar horizontal e vertical). Fica a dica!

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Segue o link da página, para referência: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *