[RESOLVIDO] Capturar scroll do HTML

Front-end
#1

Olá preciso saber se é possível capturar a ação de um scrollbar ( quando ele chegar ao final, carregar uma nova DIV em baixo da div ja existente) eu consegui fazer isso com um botão, mas preciso fazer quando a scroll chegar no final, assim como no facebook.

Como eu posso fazer isso com HTML / JS ?

#2

Exemplo em jquery:

$(window).scroll(function() { if($(this).scrollTop() + $(this).height() == $(document).height()) { alert("chegou ao final"); } });

Exemplo usando window, mas a lógica é mesma para outros casos.

Teste.

#3

brigaadao cara, vo fazer os testes aqui!!

#4

Olá, não estou conseguindo fazer funcinar, o que estou fazendo de errado?

[code]

Insert title here
[/code]
#5

No seu caso você quer fazer scroll na window inteira ou em alguma dessas divs?

#6

na window inteira!

porém ao chegar no final o conteudo atualizado será da div “feed”

#7

Então deveria funcionar, como no link que passei funciona. Poste o HTML renderizado no browser para sabermos melhor o que acontece na realidade.

[quote]porém ao chegar no final o conteudo atualizado será da div “feed”[/quote] Essa parte deixa pra depois, primeiro faz o alert funcionar, depois disso poderá fazer o que quiser neste ponto.

#8

[quote=javaflex]Então deveria funcionar, como no link que passei funciona. Poste o HTML renderizado no browser para sabermos melhor o que acontece na realidade.

esta abaixo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <script type="text/javascript" language="javascript" src="resources/js/jquery-1.2.2.js"></script>
<link rel=stylesheet href="menu.css" type="text/css">
<link rel="stylesheet" href="topStyle.css" type="text/css" />
<link rel="stylesheet" href="dock.css" type="text/css" />
<title>Insert title here</title>
</head>
<body>
<div class="dockTop">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="topStyle.css" type="text/css" />
</head>
<body>
<div class=divTop>
<div class=imageOwl></div>
<div class=nomeUser>Lucas Nunes Ventura</div>
<div class=botaoSair></div></div>
</body>
</html>
</div>
<div class="dockLateral">
<div class="dockSearch">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="procurar.css" type="text/css">
<title>Insert title here</title>
</head>
<body>
<form>
<table>
<tr>
<td><input type="text" name="caixaProcura"></td>
<td><input type="submit" name="find" value="Pesquisar (P)" style=" width : 149px;"></td>
</tr>
</table>
</form>
</body>
</html>
</div>
<!-- NAV BEGINS HERE -->
<html>
<head>
<link rel=stylesheet href="menu.css" type="text/css">
</head>
<body>
<div class="menuLateral">
<a  href=".jsp">Perfil</a><br>
<a  href=".jsp">Artigos</a><br>
<a  href=".jsp">Criar Artigo</a><br>
<a  href=".jsp">Gratificações</a><br>
<a  href=".jsp">Favoritos</a><br>
<a  href=".jsp">Universidades</a><br>
<br>

<div class="separar"></div>

<a class="a" href=".jsp"><font style="text-decoration: none;">Pesquisar Perfil</font></a><br>
<a class="a" href=".jsp"><font style="text-decoration: none;">Pesquisar Artigo</font></a>
</div>
</body>
</html>
<!-- NAV ENDS HERE -->
<div class="dockCentro">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="feed.css" type="text/css">
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class=divCenter id="divArtigos">


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="feed.css" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div class="novoArtigo">
<br>
<table>
<tr>
<td><img src="resources/images/owlpeqbronze.png">&nbsp;&nbsp;</td>
<td><a class="titulo">Programando em AJAX.</a><br>
	<a class="autor">VENTURA, Lucas Nunes.</a><br>
	<a class="autor" style="font-size: 11px">UNISUL</a>
</tr>
</table>
<div class="descricao" style="padding-left: 83px;">Este artigo irá auxiliar os usuários da tenologia JSP a trabalhar com AJAX!</div>
</div>
<div style="font-family: 'Segoe UI';font-size: 13px;border-bottom: 1px solid #cccccc;">
1(cm) 3(cc) 44(vv)
<br><br>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="feed.css" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div class="novoArtigo">
<br>
<table>
<tr>
<td><img src="resources/images/owlpeqbronze.png">&nbsp;&nbsp;</td>
<td><a class="titulo">Programando em AJAX.</a><br>
	<a class="autor">VENTURA, Lucas Nunes.</a><br>
	<a class="autor" style="font-size: 11px">UNISUL</a>
</tr>
</table>
<div class="descricao" style="padding-left: 83px;">Este artigo irá auxiliar os usuários da tenologia JSP a trabalhar com AJAX!</div>
</div>
<div style="font-family: 'Segoe UI';font-size: 13px;border-bottom: 1px solid #cccccc;">
1(cm) 3(cc) 44(vv)
<br><br>
</div>
</body>
</html><input type="submit" value="Ler Mais"  id="load" onclick="abrirPag('modelArtigo2.jsp');">
</div>
</body>
</html>
</div>
<div class="dockRight">
</div>
</div>
<script>
$(window).scroll(function() {  
    if($(this).scrollTop() + $(this).height() == $(document).height()) {  
        alert("chegou ao final");  
    }  
 });  
</script>
</body>
</html>
#9

Está funcionando, veja aqui o teste com seu próprio código: http://jsfiddle.net/S72bJ/ Tem certeza que o scroll está aparecendo e habilitado ai no seu browser para que isso funcione?

Aqui exemplo mostrando div ao invés de mostrar alert: http://jsfiddle.net/TUW6w/2/

#10

Me fale o browser que está usando.

#11

Estou usando firefox, a barra de scroll esta aparecendo sim!

Testei com o chrome e também não funcionou!

A minha div feed é preenchida por um ajax, isso pode influenciar alguma coisa?

De acordo com uns testes feitos anteriormente a minha div não estava “crescendo” junto com a scrollbar digo eu vou adicionando novos “tópicos” dentro da div
e eles vão aparecendo, porém se eu der um border: solid 1px; no css da DIV ele só vai ter sempre o mesmo tamanho, talvez isso seja o problema.

O tamanho da minha div deveria crescer com os dados não?

O height do css dela esta 100%, min-height: 100%; assim como a “dockCenter” que abriga a jsp “feed”

#12

As Divs geralmente não influenciam na Window. Mas independente das divs e ajax, o ponto de partida de ver o alert aparecendo não funcionou? Eu testei no Chrome e Firefox, ambos funcionaram, comece fazendo um código simples pra ver as coisas funcionarem e depois vai evoluindo gradualmente, fica mais fácil de aprender.

#13

talvez eu não esteja carregando o jquery corretamente.

coloquei isso dentro da tag head

e o caminho esta dentro da minha pasta webcontent

preciso fazer algo mais? pq eu fiz um codigo simples só para testar e também naõ funcionou :confused:

se puder me passar algum código simples pra testar se o jQuery esta realmente funcionando agradeço]

aeeww [RESOLVIDO] acho que estava usando uam versão de jQuery antiga e nao estava funcionando, copiei uma versão nova e agora esta funcionando valeeuuu!!

#14

talvez eu não esteja carregando o jquery corretamente.

coloquei isso dentro da tag head

e o caminho esta dentro da minha pasta webcontent

preciso fazer algo mais? pq eu fiz um codigo simples só para testar e também naõ funcionou :/[/quote]
Pode ser, verifique se o arquivo está mesmo neste local que você referenciou.

Como teste para isolar o problema, use a referencia online:<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>Se este funcionar, está errado sua referencia acima ou o arquivo não está na pasta, então basta acertar ai.

#15

talvez eu não esteja carregando o jquery corretamente.

coloquei isso dentro da tag head

e o caminho esta dentro da minha pasta webcontent

preciso fazer algo mais? pq eu fiz um codigo simples só para testar e também naõ funcionou :/[/quote]
Pode ser, verifique se o arquivo está mesmo neste local que você referenciou.

Como teste para isolar o problema, use a referencia online:<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>Se este funcionar, está errado sua referencia acima ou o arquivo não está na pasta, então basta acertar ai.[/quote]

aeeww [RESOLVIDO] acho que estava usando uam versão de jQuery antiga e nao estava funcionando, copiei uma versão nova e agora esta funcionando valeeuuu!!

#16