Jump to content
NadoLoko

Como verifico se ocorreu overflow em uma Div?

Recommended Posts

Galera o meu problema é o seguinte:

Preciso saber via código Javascript quando, em uma determinada Div, ocorreu overflow.

Ela esta como auto, mas preciso saber se ocorreu overflow depois do carregamento de dados que faço nela.

Se caso ocorreu overflow, tenho que realizar uma outra função.

Enfim preciso saber apenas como descobrir.

Share this post


Link to post
Share on other sites

tenta medindo a largura ou altura, e vendo se a largura ou altura são maiores que as do pai.

Se forem, então ocorreu overflow: auto;

Share this post


Link to post
Share on other sites

Na verdade, acho que não me expressei muito bem.

Tenho uma div com overflow auto. Gostaria de saber, via código, quando é que aparece a barra de rolagem.

Share this post


Link to post
Share on other sites

Exatamente da forma que eu falei.

Vai aparecer a barra de rolagem quando a largura ou altura do elemento com barra forem maiores que as dimensões do elemento pai.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By T-Rexz
      O negócio é o seguinte: estou criando apenas um arquivo html bem simples e básico para os atendentes utilizarem para agilizar o serviço deles em vez de inserir manualmente. Então, estou com uma dificuldade para tentar achar o problema que está ocasionando o div sumir após selecionar a segunda opção para baixo (tenta selecionar Beltrano ou Carlitos) na seleção, apenas a primeira opção Fulano está funcionando (outro detalhe: no outro arquivo que tenho segue a mesma lógica, mas é arquivo teste apenas e funciona de escolher qualquer uma das opções normalmente, mesmo sendo um arquivo-teste). Veja o código abaixo e me diz onde tá o erro que está causando??
      PS: estou utilizando o Chrome apenas, a pedido da empresa.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>SCRIPTS - RECEPÇÃO</title> <style type="text/css"> .carimboExecutador{ background: #ff0000; } .box{ color: #fff; padding: 20px; display: none; margin-top: 20px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ $(this).find("option:selected").each(function(){ var optionValue = $(this).attr("value"); if(optionValue){ $(".box").not("." + optionValue).hide(); $("." + optionValue).show(); } else{ $(".box").hide(); } }); }).change(); }); function copiarTexto5() { var textoCopiado5 = document.getElementById("link5"); textoCopiado5.select(); document.execCommand("Copy"); } <!-- function copiarTexto() { --> <!-- var textoCopiado = document.getElementById("link"); --> <!-- textoCopiado.select(); --> <!-- document.execCommand("Copy"); --> <!-- } --> function selecionaAtendente() { var puxa = $( "#listaAtendente" ).val(); var str = document.getElementById("link5").value; var n = str.replace(/XX|FULANO|BELTRANO|CARLITOS/gi,puxa); document.getElementById("link5").value=n; } </script> </head> <body> <!-- DIV PARA EXIBIR LISTA DE OPÇÕES --> <div> <h4><font face="arial" color="red">ESCOLHA A SCRIPT:</font></h2> <select> <option disabled selected>Clique aqui para exibir a lista</option> <option disabled></option> <option value="carimboExecutador">Carimbo - Identificação Executador</option> </select> </div> <!-- CLASSES PARA EXIBIR DIVS SELECIONADOS --> <div class="carimboExecutador box"> <h2><font face="arial" color="white">CARIMBO - IDENTIFICAÇÃO EXECUTADOR</font></h2> <b><font face="arial" color="white">Selecione o Responsável:</font></b> <select id="listaAtendente"> <option value="FULANO">Fulano</option> <option value="BELTRANO">Beltrano</option> <option value="CARLITOS">Carlitos</option> </select> <button onclick="selecionaAtendente()">Preencher Técnico</button> <br/><textarea rows="4" cols="90" id="link5" name="link5" readonly> NOME: XX CARGO: ATENDENTE DE TELEMARKETING </textarea> <br/><button onClick="copiarTexto5()">Copiar Texto</button> </div> </body> </html>
    • By Gourmet
      Eu tenho 3 layout diferentes e gostaria de que quando o usuário clicasse no layout desejado aparecesse o modelo do layout
    • By leandro.silva
      Estou tentando fundir essas funções para receber o total levando em consideração os filtro. Segue.
      FILTRO.
       
       
      $(function(){ $("#tabledit input").keyup(function(){ var index = $(this).parent().index(); var nth = "#tabledit td:nth-child("+(index+1).toString()+")"; var valor = $(this).val().toUpperCase(); $("#tabledit tbody tr").show(); $(nth).each(function(){ if($(this).text().toUpperCase().indexOf(valor) < 0){ $(this).parent().hide(); } }); }); $("#tabledit input").blur(function(){ $(this).val(""); }); TOTAL.
       
       
      $(function(){ var valorCalculado = 0; $( ".valor-calculado" ).each(function() { valorCalculado += parseInt($( this ).text()); }); $( "#qtdtotal" ).text(valorCalculado); });  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.