Dúvida scroll html

d2013 · Agosto 6, 2013

Tenho uma tabela dentro de uma <div>. Quando o conteudo ultrapassa o tamanho da tela utilizo "overflow: scroll" para aparecer uma barra de rolagem.

Porém, fica 2 barras de rolagem, a da tabela e a da página do site. Eu queria saber como deixar somente 1 barra mas que seja possível descer com o rolar do mouse para se ver o conteudo que ultrapassou a página abaixo.

Se eu utilizar "overflow: hidden", a barra some, porém não é possível descer com o mouse para ver o conteúdo.

Alguém tem alguma dica de como deixar somente 1 barra?

Cristian Madrid · Agosto 6, 2013

Olá, uma pergunta, você faz aparecer a barra de rolagem na div porque é necessário ? se não for coloca float:left;height:auto na sua div do conteudo que ela vai ficar do tamanho do conteudo sempre :)

d2013 · Agosto 6, 2013

Não tem alguma propriedade que permita descer com o rolar do mouse? assim eu deixava o "overflow-y: hidden".

Valeu pela rápida resposta :D

Cristian Madrid · Agosto 6, 2013

Não entendi exatamente o que você quer fazer, tem algum exemplo, pode ser de até algum site se conseguir :)

d2013 · Agosto 6, 2013

É que é assim: efetuo uma busca e o banco me retorna uma tabela, que pode ser "comprida". Atualmente usamos o overflow-y, porém fica 2 barras de rolagem, a da tabela e do site.

Ai eu queria uma forma de descer com o rolar do mouse essa tabela. Eu coloquei como sua sugestão mas está comendo parte do conteúdo.

Eu pensei também uma forma de usar "conteúdo sob demanda" usando Jquery, mas ai eu não faço ideia de como fazer :huh:

Cristian Madrid · Agosto 6, 2013

<html>
<head>
<style type='text/css'>
.conteudo{float:left;height:auto;border: 1px solid #dadada;}
.conteudo table{width:98%;margin:0 auto;}
</style>
</head>
<body>
<div class='conteudo'>
	<table>
		<tr><th>ID</th><th>TITULO</th></tr>
		<tr><td>1</td><td>Ipsum</td></tr>
		<tr><td>2</td><td>Lorem</td></tr>
		<tr><td>3</td><td>Teste</td></tr>
	</table>
</div>
</body>
</html>

Segue um exemplo de como ficaria sem precisar se preocupar com o scroll

d2013 · Agosto 6, 2013

Olha o que eu fiz com Jquery:

$('#MinhaDIv').slimScroll({
height: '100%'
});

Coloquei o plugin certinho no <script>.

Aparece uma barra de rolagem legalzinha, mas não funciona com o scroll do mouse. Você sabe se tem que baixar outro plugin do Jquery?

Entrar

Dúvida scroll html

Pergunta

d2013

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Cristian Madrid

Link para o comentário

Compartilhar em outros sites

d2013

Link para o comentário

Compartilhar em outros sites

Cristian Madrid

Link para o comentário

Compartilhar em outros sites

d2013

Link para o comentário

Compartilhar em outros sites

Cristian Madrid

Link para o comentário

Compartilhar em outros sites

d2013

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades