Ir para conteúdo

Arquivado

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

eduardo-ca

overflow:auto

Por , em Desenvolvimento frontend

Recommended Posts

eduardo-ca    0

eduardo-ca
Postado

Pessoal,

 

Tenho uma div que abre depois de clicar em um botão. Essa div abre como se fosse uma popup (mas é apenas $('#id').show()), e o conteúdo depende do usuário que esta logado. A div esta com overflow:auto. Acontece que se tiver barra de rolagem e o usuário ir até o final com o mouse (rolando), quando chega no fim ele começa a rolar também a página inteira. Isso faz com que a div role junto e desapareça, só voltando para cima ela aparece de novo.

 

Quero que o usuário quando role a barra com o mouse dentro dessa div, a barra chegue no final e pare a rolagem, que não use a rolagem da página inteira. Só deve rolar a página inteira se o usuário tirar o mouse de dentro da div overflow:auto.

 

Alguém sabe qual propriedade do css eu uso nessa div overflow:auto?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

eduardo-ca    0

eduardo-ca
Postado

Quase isso, eu preciso que a barra de rolagem principal continue aparecendo, mas sem rolar enquanto o mouse esta na outra div.

 

O facebook faz isso que eu preciso, se clicar em um dois 3 tipos de notificações (canto superior direito) abre uma div com rolagem, e faz o que eu preciso sem esconder a barra de rolagem principal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eduardo-ca    0

eduardo-ca
Postado

Isso mesmo que eu preciso. Só que para mim a barra de rolagem desaparece. Não sei porque. Copiei o exemplo e colei e a barra some quando passa o mouse.

 

Entrando no link pelo mesmo navegador funciona. Só no meu código que não.

 

 

Alguém sabe porque no meu código isso $('body').css('overflow', 'hidden'); esconde a barra de rolagem e no link http://jsfiddle.net/vQSmG/ trava?

 

Preciso que trave a barra, o que pode estar interferindo no meu código?

 

*Não posso esconder a barra, por mais que resolva o meu problema. Preciso travar como no link que o gpontes mandou. Mas não estou conseguindo reproduzir.

<!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><script type="text/javascript" src="http://www.dominio.com.br/includes/jquery-1.7.1.js"></script><style>#longpage{    height:2000px;    width:500px;    top: 500px;    background-color:red;    position:absolute;}#scrollme{    height:300px;    width:300px;    top: 500px;    background-color:yellow;    position:absolute;    z-index:2;    overflow-y: scroll;}</style></head><body><script>$(function(){	$('#scrollme').hover(function() {    	$('body').css('overflow', 'hidden');	}, function() {		$('body').css('overflow', 'auto');	});	});</script><!--making a long page --><div id="longpage"><div><!--here's a div with lots of text to scroll --><div id="scrollme">In excepteur tempor, marfa cillum twee VHS put a bird on it direct trade pop-up irure fingerstache pitchfork tumblr cray. PBR stumptown american apparel 3 wolf moon 8-bit raw denim mcsweeney's selvage, adipisicing proident. Pariatur salvia odd future +1, brunch sunt voluptate. Veniam irony nihil retro beard. Single-origin coffee ethical et wayfarers kogi. Pariatur readymade eiusmod, street art chambray polaroid semiotics ex sint biodiesel. Officia flexitarian tumblr banksy pork belly banh mi.In excepteur tempor, marfa cillum twee VHS put a bird on it direct trade pop-up irure fingerstache pitchfork tumblr cray. PBR stumptown american apparel 3 wolf moon 8-bit raw denim mcsweeney's selvage, adipisicing proident. Pariatur salvia odd future +1, brunch sunt voluptate. Veniam irony nihil retro beard. Single-origin coffee ethical et wayfarers kogi. Pariatur readymade eiusmod, street art chambray polaroid semiotics ex sint biodiesel. Officia flexitarian tumblr banksy pork belly banh mi.In excepteur tempor, marfa cillum twee VHS put a bird on it direct trade pop-up irure fingerstache pitchfork tumblr cray. PBR stumptown american apparel 3 wolf moon 8-bit raw denim mcsweeney's selvage, adipisicing proident. Pariatur salvia odd future +1, brunch sunt voluptate. Veniam irony nihil retro beard. Single-origin coffee ethical et wayfarers kogi. Pariatur readymade eiusmod, street art chambray polaroid semiotics ex sint biodiesel. Officia flexitarian tumblr banksy pork belly banh mi.In excepteur tempor, marfa cillum twee VHS put a bird on it direct trade pop-up irure fingerstache pitchfork tumblr cray. PBR stumptown american apparel 3 wolf moon 8-bit raw denim mcsweeney's selvage, adipisicing proident. Pariatur salvia odd future +1, brunch sunt voluptate. Veniam irony nihil retro beard. Single-origin coffee ethical et wayfarers kogi. Pariatur readymade eiusmod, street art chambray polaroid semiotics ex sint biodiesel. Officia flexitarian tumblr banksy pork belly banh mi.In excepteur tempor, marfa cillum twee VHS put a bird on it direct trade pop-up irure fingerstache pitchfork tumblr cray. PBR stumptown american apparel 3 wolf moon 8-bit raw denim mcsweeney's selvage, adipisicing proident. Pariatur salvia odd future +1, brunch sunt voluptate. Veniam irony nihil retro beard. Single-origin coffee ethical et wayfarers kogi. Pariatur readymade eiusmod, street art chambray polaroid semiotics ex sint biodiesel. Officia flexitarian tumblr banksy pork belly banh mi.<div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gpontes    9

gpontes
Postado

Não funcionou aí por causa do jQuery.

Colei o jQuery de uma CDN e rolou! Dá uma olhada:

 

http://jsbin.com/jobeteruvoti/1/edit

 

É o mesmo código que você postou! Só removi a linha:

<script type="text/javascript" src="http://www.dominio.com.br/includes/jquery-1.7.1.js"></script>

e coloquei:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

eduardo-ca    0

eduardo-ca
Postado

Eu to usando o Safari, com MacBook. Acontece que eu acesso o meu link com o Safari e não funciona. Daí acesso o link que você passou com mesmo Safari e funciona. Os dois links que você passou funciona. Estranho...

Compartilhar este post

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

Informação importante

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

  Aceito