Fazendo um scroll personalizado e simples
04/09/2008 - 11:28Olá,
Já me pediram várias vezes algum script simples para fazer um scroll, então finalmente fiz uma classe para atender esta necessidade.
Fiz uma classe básica, mas vai ajudar quem gostaria de fazer um scroll personalizado e simples.
Segue a implementação:
Baixe o pacote Rolagem.zip
Crie o objeto ‘Rolagem’ passando como parâmetro o nome do objeto onde terá o scroll, exemplo:
<script type="text/javascript">
rolagem = new Rolagem();
rolagem.definirCaixaRolagem('STRING_ID_OBJETO' OU document.getElementById('OBJ'));
</script>
E na setas (para cima e para baixo) coloque as funções nos eventos ONMOUSEDOWN, ONMOUSEUP e ONMOUSEOUT como sugere abaixo, veja:
SUBIR TEXTO (Seta para baixo):
<a href="javascript:;" onmousedown="rolagem.definirDirecao('cima'); rolagem.rolar();" onmouseup="rolagem.parar();" onmouseout="rolagem.parar();">SUBIR</a>
DESCER TEXTO (Seta para cima):
<a href="javascript:;" onmousedown="rolagem.definirDirecao('baixo'); rolagem.rolar();" onmouseup="rolagem.parar();" onmouseout="rolagem.parar();">DESCER</a>
Bom… é isso!
Abs,
Chapoo
Autor: Chapolin - Categoria(s): Javascript, Orientação a objetos Tags: classes, objetos, Orientação a objetos, orientado, personalizado, programação, rolagem, scroll, tutorial
olá, baixei seu codigo e estou testando mas nao esta funcionando, será q vc poderia me ajudar mandando um codigo em meu email funcionando…obrigado…abraço
Tem como alguém me enviar um exemplo com a barra funcionando?
abs
BA, eu tive que criar um id para que o li ficasse com o tamanho 100%. Falou.
Estou de volta, mas para uma coisa que não conseguir resolver.
Tenho ul e li com tamanho 100%, só que ao add o js com a função de rolagem, a div fixa perde o atributo e fica do tamanho do link, tipo, se o link tem um texto que chega a 50px, perde o restante do menu. Poderia ajudar?
Grato.
Meu caro, agradeço pela atenção. Resolvi o problema. É como você falou. Primeiro carregue o objeto alvo.
Parabéns pelo script.
Olá meu caro, tenho uma div id=pop_fix e estou add o OBJ com este id só que não está funcionando.
Poderia postar ou me enviar por e-mail também.
Gostaria de parabenizá-lo também.
Exemplo enviado para seu e-mail!
Vlw!
Chapooo!
Ola Chapo, sempre agradeço as pessoas que dedicam uma parte do tempo delas para ajudar os outros, continue com com a iniciativa.
Bom, enquanto ao script, como alguns colegas aqui, eu não estou sabendo implementa-lo. Se pudesse me enviar dicas no meu e-mail, ficarei grato.
[]’s
Ola “Chapow”, estou enfrentando dificuldades para implantar, ainda tem o exemplo para enviar por e-mail?
abraços
valeu, cara!
brigadão por ter me enviado o exemplo!
aqui tá funcionando direitinho, e já até fiz umas edições pra ficar do jeito que eu queria.
valeu, brigadão mesmo! :D
pô, aqui não tá funcionando… mas é só ignorância minha mesmo hauhauhauhua
porque saco quase nada de javascript… xP
pô, teria como você me mandar um exemplo disso aí funcionando? tipo num arquivo html direto e tal?
valeu, e obrigado desde já :)
Poderia me enviar o exemplo tb ??
Não consegui fazer funcionar aqui e parece ser mto bom.
Agradeço desde já
Beto
Pedro Henrique,
Enviado por e-mail o exemplo!
Abs,
Chapooo!
Muito bom o codigo mais nao estou consgeuindo implementar ele se vc puder me mandar um email com um exemplo eu agradeco !!!]
abracao !
Muito Legal, parabéns!
E se eu desejar fazer exatamente isso, mas para a direita e para a esquerda?
Tentei editar seu script, que está muito bem feito por sinal, mas como não entendo muito de javascript, não consegui.
Se puder me mande um exemplo de como configurar para itallo_duarte@hotmail.com;
Fico grato desde já
Olá cara, não entendi a parte da classe, tem como me ajudar ai por favor??
valeu
poderia me mandar um exeplo disso por favor, meus testes não funcionaram,
teria como fazer com click?
Tem razão!
Obrigado novamente. ;)
Julio,
Se você trocar, nos link’s de subir e descer:
‘onmousedown’ por ‘onmouseover’ e remover os ‘onmouseup’ e deixar apenas o onmouseout já vai funcionar do jeito que você me pediu.
Abs,
Danilo.
Ok Danilo. Muito obrigado pelo exemplo que você me enviou no e-mail, funciona corretamente sim, perfeito, eu que havia feito errado antes.
Só mais uma coisa, neste caso fica mais como sugestão:
seria interessante se você fizesse um script com a opção também de somente ao passar o mouse já ir subindo ou descendo e ao tirar o mouse, iria parar a ação.
Mas parabéns pelo código, já está muito bom, simples e funcional!
Como funciona? Não entendi direito. Por exemplo:
Eu criei uma div com altura 200px e restante do conteúdo fica oculto. Gostaria que ao clicar em descer, esse conteúdo fosse sendo rolado, como num iframe, só que somente para essa div, mas não funcionou.
Poderia me mostrar um exemplo de como fazer isso?
Obrigado.
Funciono perfeitamente…
Correção Efetuada!
Obrigado!
Chapoo!
Não tá funcionando p/ mozilla!:(