1. Propiedades de Desplazamiento (Offset)

En JavaScript puro, las propiedades offset permiten determinar la ubicación de un elemento respecto a su ancestro posicionado más cercano o las dimensiones totales que ocupa el elemento en el diseño.

// Selección del contenedor principal
const contenedor = document.querySelector('#mi_elemento');

// Distancia respecto al ancestro posicionado (offsetParent)
// Si no hay ancestros posicionados, se refiere al elemento html
const distanciaSuperior = contenedor.offsetTop;
const distanciaIzquierda = contenedor.offsetLeft;

// Dimensiones totales: incluye contenido, padding, bordes y barras de desplazamiento
const anchoTotal = contenedor.offsetWidth;
const altoTotal = contenedor.offsetHeight;

// Obtener dimensiones del cuerpo del documento
const bodyW = document.body.offsetWidth;
const bodyH = document.body.offsetHeight;

A diferencia de la API nativa, en jQuery el método .offset() siempre calcula la posición relativa al documento, proporcionando mayor consistencia.

// Uso en jQuery para obtener coordenadas exactas respecto al documento
const coordenadas = $('#mi_elemento').offset();
console.log('Top:', coordenadas.top, 'Left:', coordenadas.left);

2. Dimensiones de Visualización (Client)

Las propiedades client se centran en el área interna del elemento. Estas dimensiones excluyen los bordes y las barras de desplazamiento, pero incluyen el padding.

const caja = document.getElementById('caja_info');

// Grosor de los bordes del elemento
const bordeArriba = caja.clientTop;
const bordeIzquierdo = caja.clientLeft;

// Área visible del contenido (Padding incluido, Borde y Scrollbar excluidos)
const anchoVisible = caja.clientWidth;
const altoVisible = caja.clientHeight;

// Altura total de la ventana gráfica (Viewport)
const alturaViewport = document.documentElement.clientHeight;

3. Propiedades de Desplazamiento Interno (Scroll)

Estas propiedades son fundamentales para gestionar el contenido que se desborda de un contenedor y el desplazamiento de la página.

// Cálculo de la posición actual del scroll con soporte cross-browser
const scrollActual = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

// Dimensiones totales del contenido, incluyendo el área no visible por desbordamiento
const alturaContenidoTotal = caja.scrollHeight; 

// Control manual del scroll (propiedad de lectura y escritura)
const contenedorScroll = document.querySelector('.contenedor-lista');

// Escuchar el evento de desplazamiento
contenedorScroll.addEventListener('scroll', function() {
    console.log('Posición actual del scroll:', this.scrollTop);
});

// Forzar una posición de desplazamiento específica
contenedorScroll.scrollTop = 150;

4. Coordenadas de Eventos del Mouse

Al interactuar con elementos mediante puntero, existen diferentes sistemas de referencia para capturar las coordenadas (X, Y).

$('#zona_interactiva').on('click', function(evento) {
    // Relativo al elemento donde ocurre el evento
    console.log('Offset X/Y:', evento.offsetX, evento.offsetY);
    
    // Relativo a la ventana del navegador (viewport)
    console.log('Client X/Y:', evento.clientX, evento.clientY);
    
    // Relativo a toda la página (incluye el scroll)
    console.log('Page X/Y:', evento.pageX, evento.pageY);
    
    // Relativo a la pantalla completa del monitor
    console.log('Screen X/Y:', evento.screenX, evento.screenY);
});

Implementación Práctica: Desplazamiento Dinámico

El siguiente ejemplo demuestar cómo desplazar programáticamente un contenedor para que un sub-elemento específico se sitúe en la parte superior del área visible.

$('.lista-botones').on('click', '.boton-item', function() {
    const indice = $(this).index();
    const $contenedorPadre = $('#visor_contenido');
    const $objetivo = $contenedorPadre.find('.seccion-texto').eq(indice);
    
    // Calcular la posición relativa
    const scrollActual = $contenedorPadre.scrollTop();
    const posicionObjetivo = $objetivo.offset().top;
    const posicionPadre = $contenedorPadre.offset().top;
    
    // Ejecutar animación de desplazamiento suave
    $contenedorPadre.stop().animate({
        scrollTop: scrollActual + posicionObjetivo - posicionPadre
    }, 450);
});