Propriedades de Rolagem no Objeto Window

Em desenvolvimento web, obter a posição de rolagem é crucial para funcionalidades como navegação fixa ou botões interativos. As propriedades pageXOffset, scrollX, pageYOffset e scrollY fornecem acesso direto a esses valores.

Definições e Uso

pageXOffset e scrollX retornam a distância horizontal rolada em pixels. São equivalentes e de leitura, acessíveis via window.pageXOffset ou window.scrollX.

pageYOffset e scrollY indicam a distância vertical rolada, também equivalentes e somente leitura.

Compatibilidade entre Navegadores

Navegadores modernos suportam pageXOffset e pageYOffset. Para Internet Explorer 8 e anteriores, utilize document.body.scrollLeft e document.body.scrollTop como alternativas.

Relações e Restrições

Todas as propriedades são de leitura. Para alterar a posição de rolagem, empregue métodos como window.scrollTo(). A equivalência entre pageXOffset e scrollX, e entre pageYOffset e scrollY, é garantida em ambientes compatíveis.

Exemplos de Aplicação

Obter a posição atual com fallback para navegadores antigos:

const deslocamentoX = window.pageXOffset || document.body.scrollLeft;
const deslocamentoY = window.pageYOffset || document.body.scrollTop;
console.log(`Deslocamento X: ${deslocamentoX}px, Y: ${deslocamentoY}px`);

Monitorar eventos de rolagem em tempo real:

document.addEventListener('scroll', function() {
    const x = window.scrollX;
    const y = window.scrollY;
    console.log(`Rolagem detectada: horizontal=${x}, vertical=${y}`);
});

Criar um botão para retornar ao topo da página:

const botaoTopo = document.getElementById('botao-topo');

window.addEventListener('scroll', () => {
    botaoTopo.style.display = window.scrollY > 200 ? 'block' : 'none';
});

botaoTopo.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

Fixar um elemento de navegação ao rolar:

const nav = document.querySelector('nav');

window.addEventListener('scroll', () => {
    const rolagemVertical = window.pageYOffset;
    nav.classList.toggle('fixo', rolagemVertical > 80);
});

Técnicas Avançadas

Definir a posição de rolagem usando scrollTo():

// Rolar para coordenadas específicas
window.scrollTo(150, 400);

// Rolar suavemente com objeto de parâmetros
window.scrollTo({
    left: 100,
    top: 300,
    behavior: 'smooth'
});

Combinar com getBoundingClientRect() para animações baseadas em visibilidade:

const secao = document.querySelector('.secao-animada');
const limites = secao.getBoundingClientRect();

if (limites.top < window.innerHeight) {
    secao.classList.add('visivel');
}