Andei pesquisando para fazer uma barra de rolagem vertical para DIVS (Não queria utilizar a PRÓPRIA)...
Achei esta legal, fiz algumas adaptações, funcionou no IE, mas não funcionou no FIREFOX...
Gostaria de saber se alguém tem uma dica para que ele fique mais compatível com outros Browsers. :huh:
Segue o Código:
<HTML>
<script type=text/javascript>
// ------- funções para rolar textos --------
var v_conteudo = 10; // velocidade de rolagem do conteúdo em pixels
function baixo() {
var box = document.getElementById('container');
var conteudo = document.getElementById('content');
var rolagem = document.getElementById('scroller');
var visivel = box.offsetHeight; // altura do conteúdo visível
var total = conteudo.offsetHeight; // altura do conteúdo total
var restante_rolagem = visivel - 27 - parseInt(rolagem.style.top); // distância restante da rolagem
var restante_conteudo = total - visivel + parseInt(conteudo.style.top); // altura do conteúdo restante
var v_rolagem = (Math.round(restante_rolagem / restante_conteudo * v_conteudo)); // velocidade da barra de rolagem
if (parseInt(conteudo.style.top) >= ((total - visivel) * (-1)) && restante_conteudo) {
conteudo.style.top = parseInt(conteudo.style.top) - v_conteudo + "px";
rolagem.style.top = Math.min(visivel - 27, parseInt(rolagem.style.top) + v_rolagem) + "px";
}
baixovar = setTimeout("baixo()", 20);//velocidade para baixo
}
function cima() {
var box = document.getElementById('container');
var conteudo = document.getElementById('content');
var rolagem = document.getElementById('scroller');
var visivel = box.offsetHeight; // altura do conteúdo visível
var total = conteudo.offsetHeight; // altura do conteúdo total
var restante_rolagem = parseInt(rolagem.style.top) - 20; // distância restante da rolagem
var restante_conteudo = parseInt(conteudo.style.top)*(-1); // altura do conteúdo restante
var v_rolagem = (Math.round(restante_rolagem / restante_conteudo * v_conteudo)); // velocidade da barra de rolagem
if (parseInt(conteudo.style.top) < 0) {
conteudo.style.top = parseInt(conteudo.style.top) + v_conteudo + "px";
rolagem.style.top = Math.max(20, parseInt(rolagem.style.top) - v_rolagem) + "px";
}
cimavar = setTimeout("cima()", 20);//velocidade para cima
}
function parascroll(){
if (window.cimavar) clearTimeout(cimavar);
if (window.baixovar) clearTimeout(baixovar);
}
// ------- fim das funções para rolar a tabela da agenda --------
</SCRIPT>
<BODY bgcolor="#FF0000">
<DIV id="container" class="caixahist historico" style="COLOR:#ffffff; POSITION: absolute; WIDTH: 330px; HEIGHT: 98px; OVERFLOW: hidden;">
<DIV class="rolagem" style="POSITION: absolute; WIDTH: 7px; HEIGHT: 100%; RIGHT: 0px;">
<DIV class="Seta_SOBE" style="POSITION: absolute; TOP: 0px"><IMG style="CURSOR: pointer;" onMouseUp="parascroll()" onMouseOut="parascroll()" onMouseDown="cima()" border="0" alt="" src="seta_vazado_up.gif" width="7" height="7"></DIV>
<DIV class="linha" style="POSITION: absolute; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #cccccc; MARGIN: 0px; WIDTH: 1px; HEIGHT: 84px; TOP: 7px; LEFT: 3px;"></DIV>
<DIV style="TOP: 20px" id="scroller" class="retang" style="POSITION: relative; TOP: 20px;"><IMG border="0" alt="" src="rolagem.gif" width="7" height="3"></DIV>
<DIV class="Seta_DESCE" style="POSITION: absolute; BOTTOM: 0px;"><IMG style="CURSOR: pointer;" onMouseUp="parascroll()" onMouseOut="parascroll()" onMouseDown="baixo()" border="0" alt="" src="seta_vazado_down.gif" width="7" height="7"></DIV>
</DIV>
<DIV style="TOP: 0px; LEFT: 0px" id=content class=texto style="POSITION: relative; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 23px; FONT-FAMILY: Verdana, sans-serif; FONT-SIZE: 10px; CURSOR: default; PADDING-TOP: 0px;">Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5
</DIV>
</DIV>
</BODY>
</HTML>
Pergunta
Gutty
Pessoal,
Andei pesquisando para fazer uma barra de rolagem vertical para DIVS (Não queria utilizar a PRÓPRIA)...
Achei esta legal, fiz algumas adaptações, funcionou no IE, mas não funcionou no FIREFOX...
Gostaria de saber se alguém tem uma dica para que ele fique mais compatível com outros Browsers. :huh:
Segue o Código:
<HTML> <script type=text/javascript> // ------- funções para rolar textos -------- var v_conteudo = 10; // velocidade de rolagem do conteúdo em pixels function baixo() { var box = document.getElementById('container'); var conteudo = document.getElementById('content'); var rolagem = document.getElementById('scroller'); var visivel = box.offsetHeight; // altura do conteúdo visível var total = conteudo.offsetHeight; // altura do conteúdo total var restante_rolagem = visivel - 27 - parseInt(rolagem.style.top); // distância restante da rolagem var restante_conteudo = total - visivel + parseInt(conteudo.style.top); // altura do conteúdo restante var v_rolagem = (Math.round(restante_rolagem / restante_conteudo * v_conteudo)); // velocidade da barra de rolagem if (parseInt(conteudo.style.top) >= ((total - visivel) * (-1)) && restante_conteudo) { conteudo.style.top = parseInt(conteudo.style.top) - v_conteudo + "px"; rolagem.style.top = Math.min(visivel - 27, parseInt(rolagem.style.top) + v_rolagem) + "px"; } baixovar = setTimeout("baixo()", 20);//velocidade para baixo } function cima() { var box = document.getElementById('container'); var conteudo = document.getElementById('content'); var rolagem = document.getElementById('scroller'); var visivel = box.offsetHeight; // altura do conteúdo visível var total = conteudo.offsetHeight; // altura do conteúdo total var restante_rolagem = parseInt(rolagem.style.top) - 20; // distância restante da rolagem var restante_conteudo = parseInt(conteudo.style.top)*(-1); // altura do conteúdo restante var v_rolagem = (Math.round(restante_rolagem / restante_conteudo * v_conteudo)); // velocidade da barra de rolagem if (parseInt(conteudo.style.top) < 0) { conteudo.style.top = parseInt(conteudo.style.top) + v_conteudo + "px"; rolagem.style.top = Math.max(20, parseInt(rolagem.style.top) - v_rolagem) + "px"; } cimavar = setTimeout("cima()", 20);//velocidade para cima } function parascroll(){ if (window.cimavar) clearTimeout(cimavar); if (window.baixovar) clearTimeout(baixovar); } // ------- fim das funções para rolar a tabela da agenda -------- </SCRIPT> <BODY bgcolor="#FF0000"> <DIV id="container" class="caixahist historico" style="COLOR:#ffffff; POSITION: absolute; WIDTH: 330px; HEIGHT: 98px; OVERFLOW: hidden;"> <DIV class="rolagem" style="POSITION: absolute; WIDTH: 7px; HEIGHT: 100%; RIGHT: 0px;"> <DIV class="Seta_SOBE" style="POSITION: absolute; TOP: 0px"><IMG style="CURSOR: pointer;" onMouseUp="parascroll()" onMouseOut="parascroll()" onMouseDown="cima()" border="0" alt="" src="seta_vazado_up.gif" width="7" height="7"></DIV> <DIV class="linha" style="POSITION: absolute; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #cccccc; MARGIN: 0px; WIDTH: 1px; HEIGHT: 84px; TOP: 7px; LEFT: 3px;"></DIV> <DIV style="TOP: 20px" id="scroller" class="retang" style="POSITION: relative; TOP: 20px;"><IMG border="0" alt="" src="rolagem.gif" width="7" height="3"></DIV> <DIV class="Seta_DESCE" style="POSITION: absolute; BOTTOM: 0px;"><IMG style="CURSOR: pointer;" onMouseUp="parascroll()" onMouseOut="parascroll()" onMouseDown="baixo()" border="0" alt="" src="seta_vazado_down.gif" width="7" height="7"></DIV> </DIV> <DIV style="TOP: 0px; LEFT: 0px" id=content class=texto style="POSITION: relative; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 23px; FONT-FAMILY: Verdana, sans-serif; FONT-SIZE: 10px; CURSOR: default; PADDING-TOP: 0px;">Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 | Bla 1 Ble 2 Bli 3 Blo 4 Blu 5 </DIV> </DIV> </BODY> </HTML>Agradeço desde já a ajuda dos colegas.
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.