dez200917
John Marques
12
Criando barra de rolagem em div com JQuery Slider
Olá Pessoal,
seguinte acho que todo mundo já passou por isso, ter um div onde você coloca a propriedade overfllow do CSS para que ela de rolagem, mas se você é que nem eu que acha muito feio aquela barrinha que aparece igual a browser ai vai uma dica, vou demonstrar como criar um barra de rolagem com JQuery Slider, para isso você precisa entra no site da JQuery UI e fazer o download do pacote.
Seguinte vamos colocar a mão na massa, esse exemplo achei ele na web de uma outra forma e adaptei para funcionasse com um scrollbar.
arquivo css template.css
Arquivo onde faz as definições de estilo, não irei me ater na explicação da CSS, segue o código
css/template.css
/* define a coluna com o conteúdo */
#col1 {
clear:both;
position:relative;
float:left;
background:#FFF;
overflow:hidden; /* para que não apareça a barra de rolagem */
margin-left:1px;
width:534px;
height:400px;
padding:0px 0px 0px 15px;
border:1px solid #000;
}
#col2 {
position:relative;
float:left;
background:#FFF;
width:20px;
height:400px;
margin-left:5px;
}
#col2-bar {
margin-top:10px;
height:380px;
}
primeiro o index.html
Arquivo onde irá conter as divs e codigo JS e inclusão dos arquivos CSS e JS da JQuery.
Primeiro vou colocar o código JS separado para visualização
function handleSliderChange(e, ui)
{
/* tamanho máximo do scroll */
var maxScroll = $("#col1").attr("scrollHeight") - $("#col1").height();
/*
Aqui é lance onde acontece tudo, primeiro por o slider da jquery começar do ponto 0, que no caso seria a parte de inferior da barra de rolagem, e necessário que se inverta isso que ele começe da parte superior, e que a orientação seja de forma contrária ao slider da JQuery trabadicional, para o que fiz primeiro coloquei, o slider na orientação vertical, depois coloquei seu valor(Início) no ponto final que equivale a 100, que seria a parte superior da barra de rolagem, depois pequei o número 100 (equivale ao máximo) e subtrai pelo valor corrente ui.value, foi somente isso que fiz para que inverter o papel da scroll, caso queira ver como é o funcionamento padrão do slider, modifique a parte do cógio (100 - ui.value) da função handleSliderChange e handleSliderSlide e coloque somente ui.value, ficando assim "ui.value * (maxScroll/100)" e logo mais abaixo no controlador(nao sei que nome dar), alterem o valor value:100 para value:0
*/
$("#col1").animate({scrollTop: (100 - ui.value) * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#col1").attr("scrollHeight") - $("#col1").height();
$("#col1").attr({scrollTop: (100 - ui.value) * (maxScroll / 100) });
}
$(function(){
$("#col2-bar").slider({
/* Aqui colocasse o barra de rolagem na vertical dado que a slider padrão é na horizontal */
orientation: "vertical",
animate: true,
/* Aqui é um dos lances faz com que a barrinha comece no topo */
value:100,
/* Evento caso o posição seja alterado de forma programática */
change: handleSliderChange,
/* Evento que é acionado a cada posição nova do mouse */
slide: handleSliderSlide
});
});
index.html
não leve em consideração o texto dentro da div, foi só um texto qualquer que peguei para visualizar a funcionalidade da barra de rolagem.
<!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>John Marques.com.br - Criando barra de rolagem em div com JQuery Slider</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="jquery/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.slider.js"></script>
<script type="text/javascript">
function handleSliderChange(e, ui)
{
/* tamanho máximo do scroll */
var maxScroll = $("#col1").attr("scrollHeight") - $("#col1").height();
$("#col1").animate({scrollTop: (100 - ui.value) * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#col1").attr("scrollHeight") - $("#col1").height();
$("#col1").attr({scrollTop: (100 - ui.value) * (maxScroll / 100) });
}
$(function(){
$("#col2-bar").slider({
/* Aqui colocasse o barra de rolagem na vertical dado que a slider padrão é na horizontal */
orientation: "vertical",
animate: true,
/* Aqui é um dos lances faz com que a barrinha comece no topo */
value:100,
/* Evento caso o posição seja alterado de forma programática */
change: handleSliderChange,
/* Evento que é acionado a cada posição nova do mouse */
slide: handleSliderSlide
});
});
</script>
</head>
<body>
<div id="col1">
<!-- CONTEUDO DA DIV-->
<p> O décimo andar do tradicional Edifício Ypiranga, charmosa construção em estilo art-déco erguida nos anos 30, na Avenida Atlântica, é o endereço do escritório onde Oscar Niemeyer trabalha há mais de 30 anos. "Apelidaram o prédio de Mae West, por conta das protuberantes varandas que remetem à sensualidade da famosa atriz de Hollywood", brinca o arquiteto, com voz doce, mas firme. E muito bem humorado.</p>
<p> É ali, com Mãe West na memória e a Praia de Copacabana de cenário, que Niemeyer estará amanhã, dia da comemoração dos seus 102 anos. E antes que perguntem: não, ele não pensa em se aposentar. "Venho sempre ao escritório, inclusive aos sábados", avisa orgulhoso. </p>
<p>"O trabalho faz parte da própria vida. O importante é conciliar os interesses profissionais e a nossa participação na luta contra a miséria e a violência", ensina, depois de uma das muitas reuniões num dia cheio de compromissos.</p>
<p> Ele recebeu a coluna enquanto preparava a apresentação da maquete da reforma da Marquês de Sapucaí - a menina dos olhos de seu escritório deve ficar pronta para o Carnaval de 2011. </p>
<p> Niemeyer mostra em primeira mão a nova passarela do Samba. "A área dos camarotes vai ser toda redistribuída", conta. Olho vivo, mente ativa, fôlego de sobra, ele se empolga ao falar da reforma da Sapucaí. Interrompe a explicação apenas para pedir que um dos assistentes pegue outra maquete maior, com visão geral da concentração à dispersão, para colocar em sua imponente e criativa mesa de trabalho. "Essa vai ficar mais bonita para a foto", opina.</p>
<p> Na entrevista exclusiva para a coluna, ele faz uma retrospectiva da sua brilhante carreira, revela não ter medo da morte e que, apesar de todas as campanhas, não planeja parar de fumar. "Meus charutinhos são um velho hábito que cultivo com prazer". Politizado, discorre sobre o governo Lula: e mostra-se reticente quando perguntado se está mais para Dilma ou Serra em 2010. "Por favor, me inclua fora dessa", diz, sábio. </p>
<p> CENTENÁRIO <br />
"O processo de envelhecimento varia muito de pessoa para pessoa, embora inevitável. As mudanças não ocorrem de uma hora para outra. A cabeça muda pouco, a mudança física é a mais cruel".</p>
<p> BRASÍLIA<br />
"Tive muita sorte em participar da criação de Brasília. Mas a nova capital cresceu sem controle, e as disparidades socioeconômicas aumentaram de forma intolerável. Muitos são os contrastes entre as condições dos que vivem no Plano Piloto e a daqueles que residem nas cidades-satélites".</p>
<p> TRABALHOS PREFERIDOS<br />
"Aqueles que, resolvendo o programa apresentado, despertam a surpresa arquitetural por nós procurada. O MAC de Niterói é um xodó e a reforma da Marquês de Sapucaí, que ficará pronta em 2011, também".</p>
<p> HUMILDADE <br />
"Não me sinto um artista. Sou apenas um homem voltado, a vida inteira, para o desenho e a arquitetura. Não vejo nenhuma razão para me preocupar com a permanência da minha obra. A minha preocupação é que a vida se faça boa e igual para todos". LULA <br />
"No momento, o povo brasileiro tem a oportunidade de se sentir mais otimista: Lula é operário e integrado nessa luta em defesa da América Latina, que Fidel, Chávez e Morales vêm empreendendo. O Brasil, com Lula, assumiu maior importância no cenário internacional, tão difícil de avaliar".</p>
<p> PRAZERES HOJE<br />
"Meu grande e querido amigo Darcy Ribeiro já nos dizia: 'Mulher é fundamental'.</p>
<p> MEDO DA MORTE<br />
"Ninguém quer morrer. Mas a Indesejada das Gentes é uma realidade que todos um dia iremos encarar".</p>
<p> PASSADO<br />
"Minhas memórias estão todas reunidas em meu livro <em>As Curvas do Tempo</em>. Acho sempre bom quando podemos olhar para trás sem ressentimento".</p>
<p> FUTURO<br />
"Felizmente temos muito trabalho, como a reforma da Sapucaí. Isso impede a vida mais tranquila e mais ligada à luta política, que gostaríamos de ter".</p>
<p> LIÇÃO DO SÉCULO<br />
"A certeza de que somos pequenos demais neste estranho mundo". </p>
<!-- CONTEUDO DA DIV -->
</div>
<div id="col2">
<div id="col2-bar"></div>
</div>
</body>
</html>
O exemplo que mostrei tirei de outro blog e otimizei para que fizesse a função caso tenha curiosidade acessem
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
Para fazer o download do exemplo + JQuery UI clique aqui.
Abraços a todos,
John Marques
Gostou do artigo?! Então clique em um dos banners dos nossos anunciantes. =D
12 Comentários to “Criando barra de rolagem em div com JQuery Slider”
Responda
Era mesmo o que eu estava procurando. Mas ao faze-lo para o cliente ele não gostou de 2 coisas e mandou eu tirar
.
1) Não funciona posicionando o ponteiro do mouse sobre a div e usar o batão de rolagem.
1.a) este que esta na vertical, até funcionou no Safari, mas não funcionou o Firefox e nem no IE7.
1.b) no Opera, não funciona nem arrastando, isto é, se você arrasta funciona sim, mas com um atraso enorme.
2) Na barra lateral que tem (não sei dizer o nome agora) aquele negocinho onde clicamos-e-arrastamos, quando usado com o botão de rolagem do mouse sobre a div ele não corre junto, ficado parado.
Se não fosse isto estaria perto da perfeição, mas se um dia resolverem isto por favor postem aqui para compartilhar.
Obrigado
Renato bao?!
esse negocio da rolagem realmente não está “100%”, até por que é mais por carater de percebermos o que podemos fazer com jQuery.
A questão do ponteiro do mouse, acredito que basta colocar a opção na css “cursor:pointer;” no indicador #col2-bar e quando colocar o mouse sobre o cursor vai funcionar. Agora funcionar no safari não sei te dizer pq nem testei, mas tinha testado no IE7 e Firefox (rs só uso firefox), mas de boa depois podemos revisar.
Abraços,
John Marques
John
vlw show de bola fiz no meu site ficou perfeito, tah em desenvolvimento ainda mas ficou show mesmo, agora deixa te perguntar vi que vem varios, styless no jquery tem como mudar o que se colocou e se sim como eu faço vlw.
e parabens show o site
Jonathan
Nóoo salvou minha vida, muito obrigado velinho! Quando terminar o aplicativo coloco aqui o link, valew! =)
John,
É possível colocar um botão topo no fim do conteúdo? Tentei colocar mais não funciona.
Como assim Thiago? No topo e no rodapé do conteúdo ou da barra? Para interagir com a barra?
no meu caso o meu conteudo é muito grande verticalmente, então inclui duas barras de rolagem, ambas funcionam mas são idependentes, seria possível que eu conseguisse fazer com que elas rolem juntas, se eu arrastar uma somente.
Pedro e não dava para usar somente um barra?
Não sei, pode ser que de, mas tem que testar.
da sim funciona perfeitamente com uma barra mas por questão do conteudo ser muito grande verticalmente, tive a necessidade de inserir um outra barra de rolagem após o conteudo que também funciona mas estas duas barras superior e inferior não conversam, cada uma delas mantém uma posição, por exemplo se na barra superior eu rolar para o fim do conteudo (eixo ‘X’), e descer até o fim do conteúdo a minha barra inferior estará no início (eixo ‘X’) e eu gostaria de saber se tem como eu fazer com que essas duas barras conversem? mesmo que não seja possível agradeço pela sua atenção
Acho que pode ser possível mas como eu disse so testando, vendo o codigo, pensando num forma, mas não sei se seria viável.
ok, obrigado vou dar uma outra olhada no código ou tentar criar um ouvinte para que um aconpanhe o outro
Funciona no Firefox e no Chrome, porém não aparece no Internet Explorer (ultima versão 9)… alguém saberia explica o motivo??