Scrollbar com Jquery (tinyscroolbar)

[diego92ms 3]

Olá pessoal, estou precisando de uma ajuda de vocês:

 

Estou mexendo com o plugin TinyScrollBar, só que estou tendo muita dificuldade para colocar 2 barras em uma mesma página. Vou colocar meu código e as fotos

 

Estou tentando colocar essas duas barras em diferentes Tabs do Jquery, na primeira Tab funciona e na segunda a barra não funciona. Alguém pode me ajudar?

 

<div id="caderno1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="text-align:center">

<div id="scrollbar1">

<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>

<div class="viewport">

<div class="overview">

...

</div>

</div>

</div>

</div>

 

 

 

<div id="caderno2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="text-align:center">

<div id="scrollbar1">

<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>

<div class="viewport">

<div class="overview">

...

</div>

</div>

</div>

</div>

 

 

Eu acho que o TinyScrollBar bloqueia a inserção de 2 barras na mesma página, acho que teria que mexer no JS

Quem souber mexer...

http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js

[Alan Slivar 0]

Opa...

 

 

O problema é que você está definindo duas div's com o mesmo ID (scrollbar1)

 

Quando tiver várias divs, tente trabalhar com classes, é mais facil!

 

ao invés de:

 

<div id="scrollbar1">

 

tente:

 

<div class="scrollbar">

 

e na chamada JQuery, mude para:

 

  $('.scrollbar').tinyscrollbar();