3

Possuo uma td com overflow.

<td><div><?php echo $objProg->getagen(); ?></div></td>

Css:

td div {

width:100%; 
height: 30px; 
overflow: auto; 

}

Com esse CSS acima fica assim:

inserir a descrição da imagem aqui

Gostaria que as setas do lado do texto ficassem ocultas porem o scroll do mouse funcionar mesmo assim para ir para baixo e para cima, existe algo que faça isso ?

0

4 Respostas 4

3

Uma alternativa que encontrei (não sei se a melhor, pois nunca precisei fazer isso) seria utilizando uma margem negativa na div. Por exemplo:

table tbody tr td {
  border:1px solid #ccc;
  overflow: hidden;
}

table tbody tr td div {
  max-height: 40px;
  overflow-y: scroll;
  margin: 0 -20px 0 0;
}

Você coloca overflow: hidden na célula pai, e controla o scroll na div filho, dando a ela uma margem negativa, para que se estenda além da célula. O overflow: hidden na célula é importante para não deixar que a seta apareça 'fora' do td.

Veja funcionando: https://jsfiddle.net/v1ry5rko/

3
  • +1 . A idéia é boa, mas talvez seja o caso de aumentar a margem e usar um padding na direita, para caso a pessoa esteja usando uma configuração de DPI diferente, e a barra fique ampliada.
    – Largato
    Commented 8/04/2016 às 20:35
  • Tens como fazer com que a rolagem do scroll seja mais "lenta" ?
    – Kevin.F
    Commented 11/04/2016 às 11:56
  • Se você pretende usar somente css e html a resposta é não. Mas com javascript (jQuery por exemplo) você consegue, existe diversos plugins para isso. Procure por Smooth scroll (scroll suave) que você encontra =D Commented 11/04/2016 às 12:04
2

Olhe meu exemplo, não sei se entendi certo mas foi no que cheguei.

Somente quando você colocar o mouse na div as barras de rolagem aparecem.

Link: https://jsfiddle.net/z892h4oc/

1
  • 1
    Não é isso que ele deseja. O objetivo seria nunca exibir a barra de rolagem sem remover a função de scroll. Commented 8/04/2016 às 18:48
1

Você pode tentar isso aqui:

::-webkit-scrollbar {
width: 0px;
}

Aplica isso ao td da sua div. Boa sorte.

2
  • Tentei, não rolou.
    – Kevin.F
    Commented 8/04/2016 às 16:07
  • Ainda que funcionasse, isso só resolveria para WebKit. Commented 8/04/2016 às 16:56
0
td {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

td div {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Aumente e diminua esse valor para compatibilidade cross-browser */
}
1
  • Não deu, eu quero esconder essas setas do lado não quero que nem uma apareça só quero que role com o scroll quando por o mouse encima.
    – Kevin.F
    Commented 8/04/2016 às 17:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .