Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leo.tecla

[OverFlow CHROME] - Não funciona com seta do teclado para Baixo

Por , em Desenvolvimento frontend

Recommended Posts

leo.tecla    0

leo.tecla
Postado

Bom dia, pessoal.

Estou com um pequeno problema, mas que não consigo resolver.

Quando uso a propriedade de CSS: overflow, em uma div tudo funciona - barra de rolagem na vertical etc. Porém, estou encontrando um problema no navegador Chrome.

A situação é a seguinte:

Dentro da minha div #scroll eu crio uma tabela com dados. A primeira coluna da tabela é um input type=radio para me mandar informação do código para futura consulta na base. (até aqui tudo funciona).
Porém, quando tem mais linha que a altura da div ela cria a barra de rolagem. Eis meu problema. Se eu uso a seta do teclado para baixo a barra de rolagem não funciona. Só se eu usar o scroll (rodinha) do mouse. :(


MASSSSSS.... no internet explorer e mozila FUNCIONAM!!!!!!!

Vocês já tiveram este problema? Como resolveram?

Aqui vou colocar um exemplo simples em html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#scroll{
display:block;
color:#FF0000;
padding:0px;
margin-left: 22px;
width:865px;
height:152px;
white-space: nowrap;
overflow: scroll;
}
</style>
</head>


<body>


<div id="scroll">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
    
     <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
        
        <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
     <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
     <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
     <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
        <tr height="30">
        
         <td><input name="teste" type="radio" autofocus /></td> 
            <td>Quando tem </td> 
            <td>muitas linhas</td> 
            <td>e usando a seta do teclado </td> 
            <td> para baixo não funciona</td> 
         
        </tr>
  
</table>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Aqui funcionou normal amigo, com seta e scrool do mouse

 

Versão 50.0.2661.102 m

Negativo. Você não deve ter selecionado algum radio. A dúvida dele em questão é, quando o radio é selecionado e você usa as setas, ele não acompanha o scroll.

 

Essa parece ser uma condição comum do Chrome, já que ele transita entre objetos fornecendo só um :checked a eles.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Lucas Dutra
      Todo site que faço o overflow auto não funciona
      Por Lucas Dutra
      Boa noite, todo site que faço  o overflow: auto não funciona, no celular continua exibindo a barra horizontal. Já utilizei o overflow-x: hidden;, ja utilizei o overflow: auto e mesmo assim não saiu, o mais curioso é que no computador funciona normal o overflow-x: hidden, já se eu coloco o auto além de ficar no celular tbm fica no site. Creio que estou comentendo algum erro na programação, alguém pode me ajudar por favor ? 
    • BryanSamuel
      Rolar scroll do mouse na horizontal
      Por BryanSamuel
      Como faz para que, quando o mouse estiver em cima do bloco, o scroll rode na horizontal?
       
    • Alessandro Bodão
      usar funções de scroll com o overflow:hidden
      Por Alessandro Bodão
      Bom dia rapaziada, estou fazendo um site com o scroll travado com overflow:hidden, e quero que alguns elementos apareçam e desapareçam em determinadas partes do site, mas o código js só funciona se o scroll estiver rolando. Queria que me ajudassem a funcionar mesmo o overflow:hidden.
    • Omar~
      overflow (Barra de Rolagem) Nova posição?
      Por Omar~
      Bem nunca vi isso, mas existe alguma maneira de alterar onde a barra de rolagem de uma div por exemplo vai ficar?
       
      Em um div qualquer onde colocar-mos um tamanho superior ao interno, podemos criar uma rolagem utilizando overflow-y então tenho uma barra de rolagem na vertical que fica posicionada à direita.
      Então essa é a questão. Há como posicionar essa barra de rolagem à esquerda?
    • lvsis
      Overflow-x e overflow-y não funcionam
      Por lvsis
      O meu problema é o seguinte:
      Tenho um menu vertical com submenus, e queria que quando ele ultrapassasse o comprimento da div aparecesse a barra de rolagem.
      Ai é que entra o problema, quando declaro o overflow-y como auto o overflow-x assume o mesmo comportamento, fazendo com que ao passar o mouse em um menu os submenus fiquem escondidos
      e apareça uma barra de rolagem horizontal.
       
      Código CSS da div que contem o   menu
      #menu{ float: left; background-color: #F3F3F3; border-right: solid 2px black; overflow-x: visible; overflow-y: auto; }  
      Se alguém puder me ajudar já agradeço.
      Valeu.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito