Jugando con medidas y javaScript

Me está tocando realizar alguna que otra labor con javaScript y como yo pertenezco a la vieja escuela en este lenguaje, intento siempre sacarlo todo a través de las propiedades del propio lenguaje.

Esto, si bien tiene la ventaja de que aprendes javaScript puro y duro, tiene la desventaja de que hay que saber ciertos trucos si queremos obtener los mismos resultados independientemente del navegador que se esté usando. Y esto generalmente va referido a Internet Explorer que es el que más problemas causa y ha causado históricamente.

Por poner un ejemplo, para obtener la posición de la barra de scroll del navegador, en Firefox o Chrome nos valdrá con la propiedad window.pageXOffset; pero no en Internet Explorer 9 (y anteriores supongo) en el que hace falta coger el document.body.scrollLeft. De esta manera tenemos que empezar a hacer cosas como:

var hscroll = (document.all ? document.body.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset);

Con esto hay que tener cuidado pues uno se puede ir a casa tranquilamente pensando que su trabajo funciona para encontrarse al día siguiente con que el cliente le dice "no funciona en Internet Explorer" y tu piense... ¿qué era Internet Explorer? ¿No lo habían prohibido ya? y te toque ponerte a buscar la solución para el navegador de los hacks.

Lo mismo pasa con otras propiedades como el ancho/alto del navegador o el ancho/alto del viewport de la página que estamos viendo: hay que dar varias vueltas para obtener el valor que de verdad queremos. Cansado de ello, he decidido pasarme a la nueva escuela e introducir jQuery para obtener todos estos valores. A través de sus funciones ya implementadas no es necesario preocuparnos del navegador, pues ellos lo hacen por nosotros.
Así por ejemplo, para obtener el scroll de la página nos vale con:

var hscroll = $(window).scrollTop();
var vscroll = $(window).scrollLeft();

O lo mismo para obtener el ancho y alto del navegador:

 var winW = $(window).width();
 var winH = $(window).height();

O para obtener el offset de un elemento con respecto a la ventana:

var imgOffset = $("#elementID").offset();

Conclusión: está muy bien saber por qué funcionan las cosas y jugar con las diferentes propiedades y en los diferentes navegadores, pero cuando hay que hacer algo serio que tiene que funcionar, es preferible usar alguna de las librerías fiables que existen en internet.