[Resolvido] Mootools Fx.Scroll

[William de Castro 0]

Opa, eu denovo, estou tentando usar o Fx.Scroll do Mootools

http://demos111.mootools.net/Fx.Scroll

 

Está funcionando corretamente mas, a minha ideia era fazer o scroll partir do scroll atual.

 

O código que estou tentando

 

 

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Fx.Scroll('demo-wrapper', {
wait: false,
duration: 800,
offset: {'x': -200, 'y': -50},
transition: Fx.Transitions.Quad.easeInOut
});

$('prev').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.scrollTo(0,-100);

});


$('next').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.scrollTo(0,+100);
});

}); 
</script>

 

Se clico no next ele vai 100px pra baixo e se clico no prev ele vai 100px pra cima, até ai tudo certo, mas eu gostaria que se clicar em next, ele vá +100px pra baixo a partir da posição que ele já está!

 

Alguém já fez algo parecido ?

 

Obrigado!

[JCMais 75]

Pegue a posição atual do scroll e some ao teu valor desejado.

 

Os valores atuais das coordenadas do scroll você pode pegar usando:

var doc = document.documentElement, body = document.body;
   x = (doc && doc.scrollLeft || body && body.scrollLeft || 0);
   y = (doc && doc.scrollTop  || body && body.scrollTop  || 0);

[William de Castro 0]

Deixa ver se eu entendi.

 

Eu to usando isto em uma div com o ID demo-wrapper, então, neste caso eu substituo o body por getElemtnbyId ?

 

Estou usando somente scroll vertical, posso ignorar o eixo x ?

 

Como eu armazeno o resultado numa variável pra somar ou subtrair ?

 

Desculpa a minha ignorância.

[JCMais 75]

Eu to usando isto em uma div com o ID demo-wrapper, então, neste caso eu substituo o body por getElemtnbyId ?

Não, você quer a posição atual do scroll da página.

 

Estou usando somente scroll vertical, posso ignorar o eixo x ?

Sim.

 

Como eu armazeno o resultado numa variável pra somar ou subtrair ?

No código que passei você já tem acesso à variavel y, no momento que você chama o scrollTo, no lugar de chamar

scroll.scrollTo(0,-100);

Você chamaria

scroll.scrollTo(0,y-100);

 

Entendeu?

 

Desculpa a minha ignorância.

Ignorante é aquele que não sabe e não deseja aprender. ;)

[William de Castro 0]

Valeu pelas explicações, vou tentar executar, em seguida eu posto aqui o resultado.

 

Obrigado

 

Ainda não deu muito certo :x

 

O problema é eu não ser familiarizado com o javascript.

Bom vou tentar ser o mais claro possível.

Essa div 'demo-wrapper' vai deslizar dentro de outra div.

 

Atualmente está assim (ingora o layout que eu baguncei todo nos testes xD)

 

http://onestudio.com.br/pena/site/galeria-de-fotos

 

Tem uma div com várias miniaturas de fotos, e os Prev | Next logo acima, acho que assim vai dar pra entender melhor.

A maneira que deixei agora é a primeira que postei, assim ela baixa só 100px e sobe só 100px.

 

Enfim, tentei com os ajustes mas ai a div nem se mexe quando clica nos botões. Tentei também

 

scroll.scrollTo(0,$('demo-wrapper').getScroll(y)-100);

 

De acordo com a documentação do Mootools.

 

Documentação Element.Dimensions

 

Documentação Fx.Scroll

 

Mas também quando clica nos botões nada acontece.

 

Talvez alguém que conheça um pouco de javascript pode interpretar melhor esta documentação.

 

Obrigado

 

PS.: A documentação são só exemplos não é muito extensa.

[William de Castro 0]

Bom dia queridos^^

 

Achei uma solução trocando a biblioteca e vim compartilhar.

Troquei Mootools por JQuery, e usei este plugin

http://demos.flesler.com/jquery/scrollTo/

 

De qualquer forma agradeço a atenção.

 

Pode colocar resolvido.

 

Obrigado