dez200917

12

Criando barra de rolagem em div com JQuery Slider

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.

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.  &quot;Apelidaram o prédio de Mae West, por conta das protuberantes varandas  que remetem à sensualidade da famosa atriz de Hollywood&quot;, 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. &quot;Venho sempre ao  escritório, inclusive aos sábados&quot;, avisa orgulhoso. </p>
 <p>&quot;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&quot;, 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. &quot;A área dos  camarotes vai ser toda redistribuída&quot;, 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. &quot;Essa vai ficar  mais bonita para a foto&quot;, 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. &quot;Meus charutinhos são um  velho hábito que cultivo com prazer&quot;. Politizado, discorre sobre o  governo Lula: e mostra-se reticente quando perguntado se está mais para  Dilma ou Serra em 2010. &quot;Por favor, me inclua fora dessa&quot;, diz, sábio. </p>
 <p> CENTENÁRIO <br />
 &quot;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&quot;.</p>
 <p> BRASÍLIA<br />
 &quot;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&quot;.</p>
 <p> TRABALHOS PREFERIDOS<br />
 &quot;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&quot;.</p>
 <p> HUMILDADE <br />
 &quot;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&quot;.  LULA <br />
 &quot;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&quot;.</p>
 <p> PRAZERES HOJE<br />
 &quot;Meu grande e querido amigo Darcy Ribeiro já nos dizia: 'Mulher é fundamental'.</p>
 <p> MEDO DA MORTE<br />
 &quot;Ninguém quer morrer. Mas a Indesejada das Gentes é uma realidade que todos um dia iremos encarar&quot;.</p>
 <p> PASSADO<br />
 &quot;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&quot;.</p>
 <p> FUTURO<br />
 &quot;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&quot;.</p>
 <p> LIÇÃO DO SÉCULO<br />
 &quot;A certeza de que somos pequenos demais neste estranho mundo&quot;. </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


Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.

12 Comentários to “Criando barra de rolagem em div com JQuery Slider”

  1. Renato Aguiar 24 maio 2010 at 11:05 #

    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

  2. John Marques 25 maio 2010 at 9:09 #

    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

  3. Jonathan 22 julho 2010 at 2:08 #

    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

  4. Adriano Meira 11 agosto 2010 at 10:55 #

    Nóoo salvou minha vida, muito obrigado velinho! Quando terminar o aplicativo coloco aqui o link, valew! =)

  5. Thiago 7 dezembro 2010 at 10:53 #

    John,

    É possível colocar um botão topo no fim do conteúdo? Tentei colocar mais não funciona.

  6. John Marques 8 dezembro 2010 at 8:29 #

    Como assim Thiago? No topo e no rodapé do conteúdo ou da barra? Para interagir com a barra?

  7. Pedro 5 janeiro 2011 at 10:47 #

    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.

  8. John Marques 5 janeiro 2011 at 11:05 #

    Pedro e não dava para usar somente um barra?
    Não sei, pode ser que de, mas tem que testar.

  9. Pedro 5 janeiro 2011 at 14:00 #

    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

  10. John Marques 5 janeiro 2011 at 14:06 #

    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.

  11. Pedro 6 janeiro 2011 at 8:30 #

    ok, obrigado vou dar uma outra olhada no código ou tentar criar um ouvinte para que um aconpanhe o outro

  12. Dani 21 julho 2011 at 10:49 #

    Funciona no Firefox e no Chrome, porém não aparece no Internet Explorer (ultima versão 9)… alguém saberia explica o motivo??


Responda