Scroll Bar

Isabel · Janeiro 10, 2008

Olá! bom diaaa ^_^

alguém sabe como eu posso montar um scroll igual a esse:

http://www.bcj.com.br/main.asp?657865636462=31

vlw gente http://forum.imasters.com.br/public/style_emoticons/default/yay.gif

Isabel · Janeiro 10, 2008

hey.. alguem ai pode me ajudar?? xD

Teclinet · Janeiro 10, 2008

Ola! :rolleyes:

Certo dia também precise criar algo parecido em um projeto que estava

desenvolvendo, e não foi nada facil consegui-lo. Mas nada que algumas horas de

procura e estudos não viesse a conseguir.

Vou deixar um exemplo simples do que uilizei no meu projeto, e vamos ver se

tambem lhe ajuda.

1 - Crie um arquivo js com o seguinte codigo:

CODE

var scrollVy;var scrollHx;
 
<!-- 
 
var upH = 12; // Height of up-arrow
var upW = 12; // Width of up-arrow
var downH = 12; // Height of down-arrow
var downW = 12; // Width of down-arrow
var dragH = 12; // Height of scrollbar
var dragW = 12; // Width of scrollbar
//var scrollH = scrollVy; // Height of scrollbar
var scrollH; // Height of scrollbar
var speed = 5; // Scroll speed
 
// And now... go to the bottom of the page...
 
// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;
 
var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick
 
var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar
 
var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span
 
picup = new Image();    picup.src = "up.gif";
picdown = new Image();  picdown.src = "down.gif";
picdrag = new Image();  picdrag.src = "drag.gif";
 
if(window.addEventListener)
  window.addEventListener('DOMMouseScroll', handleMouseWheel, false);
else
  document.onmousewheel = handleMouseWheel;
 
// 
function handleMouseWheel(e)
{
	if (!e) 
		e = window.event;
 
	if ( e.wheelDelta <= 0 || e.detail > 0)
	{
		clickDown = true; 
		scrollDown();
		scrollDown();
		scrollDown();
		scrollDown();
		scrollDown();
		clickDown = false;
	}
	else
	{
		//alert('Rodou para cima');
		clickUp = true; 
		scrollUp();
		scrollUp();
		scrollUp();
		scrollUp();
		scrollUp();
		clickUp = false; 
	}
}
 
 
// Preload
function eventLoader(){
        if(ie4){
        				// Up-arrow X and Y variables
                upL = document.all.up.style.pixelLeft;
                upT = document.all.up.style.pixelTop;           
                // Down-arrow X and Y variables
                downL = document.all.down.style.pixelLeft;
                downT = document.all.down.style.pixelTop;
                // Scrollbar X and Y variables
                dragL = document.all.drag.style.pixelLeft;
                dragT = document.all.drag.style.pixelTop;               
                // Ruler Y variable
                rulerT = document.all.ruler.style.pixelTop;             
                // Height of content layer and clip layer
                contentH = document.all.content.offsetHeight;
                contentClipH = document.all.contentClip.offsetHeight;
				scrollVy = document.all.ColumnConteudo.offsetHeight - 28;
				scrollHx = document.all.ColumnConteudo.offsetHeight - 28;
				scrollH = scrollVy;
        }
        else if(nn4){
                // Up-arrow X and Y variables
                upL = document.up.left;
                upT = document.up.top;          
                // Down-arrow X and Y variables
                downL = document.down.left;
                downT = document.down.top;              
                // Scrollbar X and Y variables
                dragL = document.drag.left;
                dragT = document.drag.top;              
                // Ruler Y variable
                rulerT = document.ruler.top;
                // Height of content layer and clip layer
                contentH = document.contentClip.document.content.clip.bottom;
                contentClipH = document.contentClip.clip.bottom;
        }
        else if(dom){
                // Up-arrow X and Y variables
                upL = parseInt(document.getElementById("up").style.left);
                upT = parseInt(document.getElementById("up").style.top);
                // Down-arrow X and Y variables
                downL = parseInt(document.getElementById("down").style.left);
                downT = parseInt(document.getElementById("down").style.top);
                // Scrollbar X and Y variables
                dragL = parseInt(document.getElementById("drag").style.left);
                dragT = parseInt(document.getElementById("drag").style.top);
                // Ruler Y variable
                rulerT = parseInt(document.getElementById("ruler").style.top);
                // Height of content layer and clip layer
                contentH = document.getElementById("content").offsetHeight;
                contentClipH = document.getElementById("contentClip").offsetHeight;
                document.getElementById("content").style.top = 0 + "px";
				scrollVy = document.getElementById("ColumnConteudo").offsetHeight - 28;
				scrollHx = document.getElementById("ColumnConteudo").offsetHeight - 28;
                scrollH = scrollVy;
        }
        // Number of pixels scrollbar should move
        scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
        // Initializes event capturing
        if(nn4){
                document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
                window.onresize = reloadPage;
        }
        document.onmousedown = down;
        document.onmousemove = move;
        document.onmouseup = up;
}
 
// Mousedown
function down(e){
        if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton          
        getMouse(e);
        startY = (mouseY - dragT);
 
        // If click on up-arrow
        if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
                clickUp = true;
                //picDown('up');
                return scrollUp();
        }       
        // Else if click on down-arrow
        else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
                clickDown = true;
                //picDown('down');
                return scrollDown();
        }
        // Else if click on scrollbar
        else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
                clickDrag = true;
                //picDown('drag');
                return false;
        }
        else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
                // If click above drag
                if(mouseY < dragT){
                        clickAbove = true;
                        clickUp = true;
                        return scrollUp();
                }
                // Else click below drag
                else{
                        clickBelow = true;
                        clickDown = true;
                        return scrollDown();
                }
        }
        // If no scrolling is to take place
        else{
                return true;
        }
}
 
function picDown(which){
        if(document.all) {
                eval('document.all.pic' + which + '.src = pic' + which + '.src');
        }
        else {
                eval('document.' + which + '.document.pic' + which + '.src = pic' + which + '.src');
        }
}
 
function picUp(which){
        if(document.all) {
                eval('document.all.pic' + which + '.src = "' + which + '.gif"');
        }
        else {
                eval('document.' + which + '.document.pic' + which + '.src = "' + which + '.gif"');
        }
}
 
function moveDrag(){
//		alert();
//		dragH = 12 sempre -----
//		dragT = Posição da bolinha
//		dragT = rulerT;
//                if(dragT < (rulerT))
//                        dragT = rulerT;         
//                if(dragT > (rulerT + scrollH - dragH))
//                        dragT = (rulerT + scrollH - dragH);
//alert(scrollLength);
//if (contentT != null) 
// document.getElementById("drag").style.top
//document.all.ColumnConteudo.offsetHeight
//alert(document.all.createRange().text.length);
}
 
// Drag function
function move(e){
        if(clickDrag && contentH > contentClipH){
                getMouse(e);
                dragT = (mouseY - startY);
 
                if(dragT < (rulerT))
                        dragT = rulerT;         
                if(dragT > (rulerT + scrollH - dragH))
                        dragT = (rulerT + scrollH - dragH);
 
                contentT = ((dragT - rulerT)*(1/scrollLength));
                contentT = eval('-' + contentT);
 
                moveTo();
        }
        // So ie-pc doesn't select gifs
        if(ie4)
                return false;
}
 
function up(){
        clearTimeout(timer);
        // Resetting variables
        clickUp = false;
        clickDown = false;
        clickDrag = false;
        clickAbove = false;
        clickBelow = false;
        //picUp('up');
        //picUp('down');
        //picUp('drag');
        return true;
}
 
// Reads content layer top
function getT(){
        if(ie4)
                contentT = document.all.content.style.pixelTop;
        else if(nn4)
                contentT = document.contentClip.document.content.top;
        else if(dom)
                contentT = parseInt(document.getElementById("content").style.top);
}
 
// Reads mouse X and Y coordinates
function getMouse(e){
        if(ie4){
                mouseY = event.clientY;
                mouseX = event.clientX;
        }
        else if(nn4 || dom){
                mouseY = e.pageY;
                mouseX = e.pageX;
        }
}
 
// Moves the layer
function moveTo(){
		if(ie4){
				document.all.content.style.top = contentT;
				document.all.ruler.style.top = dragT;
				document.all.drag.style.top = dragT;
        }
        else if(nn4){
                document.contentClip.document.content.top = contentT;
                document.ruler.top = dragT;
                document.drag.top = dragT;
        }
        else if(dom){
                document.getElementById("content").style.top = contentT + "px";
                document.getElementById("drag").style.top = dragT + "px";
                document.getElementById("ruler").style.top = dragT + "px";
        }
}
 
// Scrolls up
function scrollUp(){
        getT();
 
        if(clickAbove){
                if(dragT <= (mouseY-(dragH/2)))
                        return up();
        }
 
        if(clickUp){
                if(contentT < 0){
                        dragT = dragT - (speed*scrollLength);
 
                        if(dragT < (rulerT))
                                dragT = rulerT;
 
                        contentT = contentT + speed;
                        if(contentT > 0)
                                contentT = 0;
 
                        moveTo();
                        timer = setTimeout("scrollUp()",25);
                }
        }
        return false;
}
 
// Scrolls down
function scrollDown(){
        getT();
 
        if(clickBelow){
 
                if(dragT >= (mouseY-(dragH/2)))
                        return up();
        }
 
        if(clickDown){
                if(contentT > -(contentH - contentClipH)){                      
 
                        dragT = dragT + (speed*scrollLength);
                        if(dragT > (rulerT + scrollH - dragH))
                                dragT = (rulerT + scrollH - dragH);
 
                        contentT = contentT - speed;
                        if(contentT < -(contentH - contentClipH))
                                contentT = -(contentH - contentClipH);
 
                        moveTo();
                        timer = setTimeout("scrollDown()",25);
                }
        }
        return false;
}
 
// reloads page to position the layers again
function reloadPage(){
        location.reload();
}
 
function AjustLayers()
	{
 
	  var dom = document.getElementById ? true:false;
	  var nn4 = document.layers ? true:false;
	  var ie4 = document.all ? true:false;
	  var ccTop, ccLeft, ccWidth;
	  if (ie4) 
	  {
		 ccTop = findPosY(document.all["ColumnConteudo"]);
		 ccLeft = findPosX(document.all["ColumnConteudo"]);
		 ccWidth = document.all["ColumnConteudo"].offsetWidth;
 
		 document.all["contentClip"].style.left = ccLeft;
		 document.all["contentClip"].style.top  = ccTop  + 10 ;
		 document.all["drag"].style.left  = ccLeft + ccWidth - 12 + "px";
		 document.all["drag"].style.top   = ccTop  + 14  + "px";
		 document.all["ruler"].style.left = ccLeft + "px";
		 document.all["ruler"].style.top  = ccTop  + 14  + "px";
		 document.all["contentClip"].style.visibility = "visible";
		 document.all["ruler"].style.visibility = "visible";
		 document.all["drag"].style.visibility = "visible";
 
	  } 
	  else
	  {
		 ccTop = findPosY(document.getElementById("ColumnConteudo"));
		 ccLeft = findPosX(document.getElementById("ColumnConteudo"));
		 ccWidth = document.getElementById("ColumnConteudo").offsetWidth;
		 document.getElementById("contentClip").style.left = ccLeft + "px";
		 document.getElementById("contentClip").style.top  = ccTop  + 2 + "px";
		 document.getElementById("drag").style.left  = ccLeft + ccWidth - 12 + "px";
		 document.getElementById("drag").style.top   = ccTop  + 14  + "px";
		 document.getElementById("ruler").style.left = ccLeft + "px";
		 document.getElementById("ruler").style.top  = ccTop  + 14  + "px";
		 document.getElementById("contentClip").style.visibility = "visible";
		 document.getElementById("ruler").style.visibility = "visible";
		 document.getElementById("drag").style.visibility = "visible";
	  }
	}
 
function HiddenLayers(obj) 
{
	if (ie4) 
	{
		document.all[obj].style.visibility = "hidden";
	}
	else
	{
		document.getElementById(obj).style.visibility = "hidden";
	}
}
 
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent != null)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}
 
function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent != null)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}
//-->

e salve ele com o nome dragscroll.js;

2 - Crie um arquivo chamado index.html e salve com junto com a biblioteca dragscroll.js

criada anteriormente, e adicione o seguinte codigo:

CODE

<html><head>
<title>Exemplo de um Scroll Bar com JavaScript</title>
</head>
<!-- Função que contem os codigos, referentes a movimentação da barra de rolagem -->
<script src="dragscroll.js" language="javascript"></script>
 
<!--Primeiro ao carregar a pagina eu Chamo duas funções AjustLayers() e eventLoader()
	AjustLayers - Ajusta as posições corretas do scroll, como a bolinha central e os botoes UP e DOWN-->
<body onLoad="AjustLayers(); eventLoader();">
 
<!-- Defino a posição da div up -->
<div id="up" STYLE="z-index:1; "></div>
 
<!-- Defino a posição da div down -->
<div id="down" STYLE="z-index:1;"></div>
 
<!-- Defino a posição da div drag, e adicionando a imagem do scroll central-->
<div id="drag" STYLE="position:absolute; top:43px; left:809px; width:12px; height:12px; z-index:1; visibility:hidden;">
	<IMG SRC="img/central.gif" WIDTH="12" HEIGHT="12" ALT="" BORDER="0" NAME="picdrag">
</div>
 
<!-- Defino a posição inicial da bolinha central da nossa Scroll Bar  -->
<div id="ruler" STYLE="position:absolute; top:63px; left:686px; width:12px; height:12px; z-index:1;"></div>
 
<!-- Aqui esta a div que irá conter o conteudo mostrado no interior da camada, ou seja, seu texto. 
Os valores abaixo atribuidos estão relacionados a posição que deverá ficar o div na tabela criada, que será mostrada 
mais abaixo -->
<div id="contentClip" style="clip: rect(0px 405px 220px 0px); width:390px; height:210px; top: 64px; left:287px; 
overflow: hidden; position: absolute; z-index:1; visibility:hidden;">
	<div id="content" STYLE="position:absolute; top:1px; left:1px; overflow:hidden; width: 382px; z-index:1;"
 CLASS="Body"  onMouseUp="moveDrag();">
 
                <p> Aki seu Conteudo! </p>
                <p> Lorem ipsum dolor sit amet, 
                       consectetuer adipiscing elit. Pellentesque sit amet tellus. 
                       Nulla sit amet urna. Suspendisse adipiscing, nisi eu consectetuer 
                       placerat, nisl turpis tincidunt lacus, ut congue
                       justo leo sed ligula. Duis lectus. Donec quam. 
                       Sed molestie massa. Sed purus. 
                       Suspendisse molestie suscipit 
                       massa. Nunc vel nunc malesuada velit ornare consectetuer. 
                       Fusce sollicitudin commodo pede. Aliquam nisi massa, congue
                       sed, malesuada eget, varius non, erat. Nam facilisis dui non lacus. </p>
 
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
                <p> Conteudo </p>
	</div>
</div><!-- Fim da div que contem o conteudo -->
 
<!-- tablea que posiciona cada elemento da nossa scroll bar -->
<div align="center">
    <table height="235" border="0" cellpadding="0" cellspacing="0" id="ColumnConteudo">
      <tr>
        <td width="401"></td>
        <td width="12" height="12"> <!-- Celula da tabela contendo o botao UP -->
        	<div align="center">
            	<img src="img/up.gif" width="12" height="12" 
                			onMouseUp="clickUp = false;" 
                            onMouseDown="clickUp = true; return scrollUp();" 
                            name="picup">            </div>
        </td>
      </tr>
      <tr>
      <!-- Celula da tabela será mostrado o conteudo da div content 
             que esta contida dentro da div contentClip -->
        <td width="401" height="211"> </td> 
        <td background="img/fundo.gif" style="background-repeat:repeat-y ">
        	<div align="center"></div>
        </td>
      </tr>
      <tr>
        <td width="401"></td>
        <td height="12">
        	<div align="center"> <!-- Celula da tabela contendo o botao DOWN -->
            	<img src="img/down.gif" width="12" height="12" 
                		onMouseUp="clickDown = false;" 
                        onMouseDown="clickDown = true; return scrollDown();" 
                        name="picdown">            </div>
        </td>
      </tr>
    </table>
</div>
</body>
</html>

3 - Foi utilizado as seguintes imagens no exemplo:

central.gif { Imagem Postada }

down.gif { Imagem Postada }

fundo.gif { Imagem Postada }

up.gif { Imagem Postada }

Coloque as imagens em uma pasta chamda img que deve estar junto com

os dois primeiros arquivos criados.

Pronto! Expero ter ajudado. Até a próxima!

Entrar

Arquivado

Scroll Bar

Recommended Posts

Isabel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Isabel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Teclinet 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante