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