19.04.2025

Verificando a Visibilidade de um div no jQuery: Uma Solução para SPAs

Resposta Rápida

Para determinar a visibilidade de um elemento div, você pode usar a função do jQuery .is(":visible"):

if ($("#myDiv").is(":visible")) {
  // Ótimo, o div está presente e visível!
}

Lembre-se de que este código verifica com base nas propriedades CSS display e visibility, sem considerar se o div está sendo exibido na tela do usuário.

O Conceito de :visible no jQuery

A visibilidade de um elemento em uma página web é controlada por propriedades CSS como display, visibility, opacity, além de sua posição dentro da área visível (viewport). A função do jQuery .is(':visible') verifica se o elemento atende aos critérios de visibilidade de acordo com o CSS, sem levar em conta sua posição dentro da área visível.

Verificações e Operações Condicionais

Suas ações podem depender da visibilidade do div:

// Se o div estiver visível na tela, execute uma operação interessante
if ($('#selectDiv').is(':visible')) {
  realizarAcaoLegal(); // A implementação dessa ação depende de você
}

// Se o div estiver invisível, escolha uma estratégia alternativa
if (!$('#invisibleDiv').is(':visible')) {
  realizarAcaoEmpolgante(); // Por exemplo, faça algo emocionante
}

Especificidades de SPA: Mudando a Visibilidade sem Recarregar a Página

Em aplicações de página única (APAs), os elementos podem se tornar visíveis ou invisíveis dinamicamente, especialmente importante considerar após operações assíncronas:

function verificarVisibilidade() {
  if ($('#selectDiv').is(':visible')) {
    // Código único executado quando o div se torna visível
  }
}

// Chame esta função em cada evento que potencialmente mude a visibilidade.

Visualização

Você pode pensar na verificação da visibilidade como checar por janelas de casas:

Janela (🏠🪟): [Cortinas Fechadas 🚫, Cortinas Abertas ✅]

Vamos aplicar essa ideia no contexto do jQuery:

if ($('#divId').is(':visible')) {
  console.log('Tem alguém na casa! Em outras palavras, o div está visível.');
}

A analogia se apresenta assim:

Cortinas Fechadas 🚫: $('#divId').is(':visible') // false: não vemos nada!
Cortinas Abertas ✅: $('#divId').is(':visible') // true: vemos você, `divId`!

Nuances do Uso de :visible

O seletor :visible refere-se a elementos que possuem a propriedade CSS display diferente de none, e visibility diferente de hidden. Embora elementos de tamanho zero sejam tecnicamente visíveis, o jQuery os considera invisíveis:

// Um elemento de tamanho zero é "invisível" na perspectiva do jQuery
$('#zeroSizeDiv').is(':visible') // false

Jogos de Esconde-Esconde: Métodos para Gerenciar Visibilidade

O jQuery fornece os métodos .hide() e .show() para controlar a visibilidade de um elemento:

$('#toggleButton').click(function() {
  $('#myDiv').toggle(); // O div está escondido ou mostrado
});

Dominando o Controle de Visibilidade

Criando Funções Personalizadas para Verificar Visibilidade

Em situações complexas, como quando você precisa verificar se um elemento está na área visível, você pode estender a funcionalidade do jQuery:

// Estendendo o jQuery com uma função que verifica a visibilidade de um elemento na área visível
$.fn.isVisibleInViewPort = function() {
  var elementoTopo = $(this).offset().top;
  var elementoBase = elementoTopo + $(this).outerHeight();
  var viewportTopo = $(window).scrollTop();
  var viewportBase = viewportTopo + $(window).height();
  return elementoBase > viewportTopo && elementoTopo < viewportBase;
};

if ($('#myDiv').isVisibleInViewPort()) {
  // O div está visível, não pode estar escondido
}

Especificidades da Interação com Elementos Ocultos de Outras Maneiras

Curiosamente, elementos com opacity: 0 ou elementos fora da área visível ainda são considerados visíveis do ponto de vista do JavaScript segundo a perspectiva do jQuery:

$('#transparentDiv').is(':visible') // true, apesar da transparência total
$('#offScreenDiv').is(':visible')   // true, o jQuery não considera a saída da tela

Otimização de Performance

Usar o seletor :visible em grandes DOMs pode diminuir a performance. Para melhor performance, é recomendável usar seletores específicos ou limitar o escopo da busca:

// Busca não otimizada: solução lenta
$('div:visible').fazerAlgo();

// Busca otimizada: opção mais rápida
$('#parent').find('div').filter(':visible').fazerAlgo();

Recursos Úteis

1. :visible Selector | jQuery API Documentation – Explicação oficial sobre o uso do seletor :visible.
2. Como Verificar se um Elemento Está Visível Após o Scroll? - Stack Overflow – Discussão da comunidade sobre a visibilidade após o scroll.
3. visibility - CSS: Folhas de Estilo em Cascata | MDN – Estudo aprofundado sobre visibilidade através do CSS no MDN.
4. Como Posso Alternar entre Esconder e Mostrar um Elemento — Um guia simples sobre como gerenciar a visibilidade de elementos.
5. Como Posso Verificar se um Elemento Está Oculto no jQuery? - Stack Overflow – Discussão sobre métodos para determinar elementos ocultos.
6. .hide() | jQuery API Documentation – Explicação do método .hide() na documentação do jQuery.
7. .show() | jQuery API Documentation – Visão geral do método .show() na documentação oficial do jQuery.

Video

Navigation