# Scrollbar mit javascript..



## crashcoder (30. Mai 2003)

Hallo
ich möchte eine Scrollbar mit Javascript erstellen.
Die Up-/Down Buttons sind nicht das Problem, aber es soll
noch eine leiste dazukommen, mit der man per klick an die
jeweilige Position gelangt..
es soll übrigens ein iframe gescrollt werden.
mit der leiste hab ich mir das so vorgestellt:
ein div-bereich stellt die leiste dar. bei onclick wird in etwa folgendes ausgeführt:
iframe.scrollTo(0, MaxHeight * (RelMouseY / DivHeight));
leider weiß ich weder, wie man die y-mauskoordinate relativ
zum div-container bekommt, noch wie man MaxHeight, also den 
Wert, bis zu dem man maximal scrollen kann, herauskriegt..
weiß jemand wie das geht??
danke schonma für die hilfe
crashcoder


----------



## Klon (3. Juni 2003)

Habe sowas mal benutzt und glücklicherweise wieder gefunden, allerdings nicht mit einer iFrame sondern komplet mit DIV's, hilft dir aber sicher weiter.


```
<script language="javascript">
// Made by geeeet@ghtml.com
// Keep these two lines and you're free to use this code

// Known bugs :
// If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...

var upH = 18; // Height of up-arrow
var upW = 12; // Width of up-arrow
var downH = 18; // Height of down-arrow
var downW = 12; // Width of down-arrow
var dragH = 26; // Height of scrollbar
var dragW = 17; // Width of scrollbar
var scrollH = 161; // Height of scrollbar
var speed = 4; // 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

// 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;
		return scrollUp();
	}	
	// Else if click on down-arrow
	else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
		clickDown = true;
		return scrollDown();
	}
	// Else if click on scrollbar
	else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
		clickDrag = true;
		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;
	}
}

// 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;
	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 + document.body.scrollTop;
		mouseX = event.clientX + document.body.scrollLeft;
	}
	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();
}

// 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 = parseInt(document.all.content.scrollHeight);
		contentClipH = parseInt(document.all.contentClip.style.height);
	}
	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 = parseInt(document.getElementById("content").offsetHeight);
		contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
		document.getElementById("content").style.top = 0 + "px";
		
	}
	// 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;
}
</script>
```

In den BODY Tag noch: onLoad="eventLoader();"

Hier noch der Code für die ganzen Elemente des Scrollers, habe das nicht mehr nachbearbeitet, geht dir ja hauptsächlich um die Rechnungen:


```
<div style="position:absolute;top:105;left:125;Z-Index=19" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <img src="bg_scroll.gif" border="0"></div>


<span id="up" style="position: absolute; top: 118px; left:664px;; z-index: 21;">
	<img src="up.gif" border="0">
</span>


<span id="down" style="position: absolute; top: 338px; left: 664px;; z-index: 22;">
	<img src="down.gif" border="0">
</span>


<span id="drag" style="position: absolute; top: 125px; left: 660px;  z-index: 23;">
	<a href="#"><img src="drag.gif" border="0"></a>
</span>


<span id="ruler" style="position: absolute; top: 125px; left: 660px; z-index: 24;"></span>


<span id="contentClip" style="position: absolute; top: 125px; left: 130px; width: 519px; height: 225px; clip:rect(0px,519px,225px,0px); visibility: visible; z-index: 25; overflow: hidden;">
	<span id="content">
	<img src="scroll_txt.gif">
	</span>
</span>
```


Hoffe du kommst damit zurecht 


Anschauen kannst du dir das hier: http://www.bytephobia.de/v2/

Hab ich nie zu ende gebaut, kann dir bei Bedarf auch den ganzen Code schicken, wobei das unescape ja für dich auch kein Problem sein sollte.


----------



## crashcoder (3. Juni 2003)

jo danke, das is genau das was ich brauche.. mal gucken ob ich das auch eingebaut krieg


----------



## Yoda (31. Juli 2003)

Soviel Quelltext für eine Scrollbar... wow


----------



## Dodoo (7. November 2003)

Hallo

also es wäre sehr nett von euch, wenn einer mir das genau erklären könnte. 

Wo ich das einfügen muss usw. was ich ändern muss usw. 

Schonmal danke


----------



## chrisbergr (28. November 2003)

*Brauche dringend Hilfe*

Hi ihrs, ich wollte das script eben auch für meine neue version der hp benutzen. nur stehe ich jetzt vor dem problem, dass die webseite immer links unten vom fenster ist, und da die auflößungen ja bekanntlich bei jedem anderst sind, kann ich das wohl schlecht realisieren mit der absoluten positionsangaben.
 Desswegen meine Frage, besteht irgendwie die Möglichkeit, dass ich das per Tabelle anstelle des Layers mache? also dass ich sage dieses <TD> hat eine vorgegebene höhe und breite.. und wenn der inhalt grösser ist, wird die tabelle nicht gestreckt und eine scrollbar rechts angezeigt.
- iFrame kann ich nicht verwenden, da der Inhalt in der gleichen Datei stehen muss.
Bei diesem Script welches in diesem Thrad gepostet wurde, ist es kein problem, bei dem content die absolute pos. angabe wegzulassen udn den div in die gewünschte tabelle zu machen. nur erstens scrollt der text dann nicht mehr mit (kann auch daran liegen dass ich was falsch gemacht habe) und zweitens brauch ich für die scrollbar aber auf jeden fall eine absolute pos. angabe...

*Ich bitte um Hilfe.* 

Gruss neuro


----------



## chrisbergr (28. November 2003)

ok, dass der inhalt nicht scrollte war nen fehler meinerseits. Mit dem Content ist alles ok .. 
Ich brauche jetzt nur irgendwie eine Lößung für die Scrollbar..
Gibt es die Möglichkeit per JS eine Funktion zu erstellen, dass ich die Position auch vom linken rand und vom unteren rand (anstelle des oberen) berechne?

gruss


----------



## chrisbergr (1. Dezember 2003)

Howdy .. wie gesagt, den inhalt konnte ich nicht in einen iframe machen, ich habs jetzt einfach so gelößt, dass die ganze seite in einem iframe ist.. jetzt hab ich die seite immer schön links unten und es ist eigentlich alles so wie ich mir das vorgestellt habe.

Nur ein Problem...

Das Gästebuch. Wenn ich auf den Menüpunkt klicke und dann die Scrollbar betätigen möchte, stürzt ständig der IE ab weil er irgend einen Fehler macht.

Ich habe schon alles mögliche ausprobiert wie z.B. ein anderes JS welches den Value der Form Felder leert, wenn man drauf klickt, aber das hat alles nichts geholfen. Ich bin am verzweifeln.

Wenn sich das vielleicht mal jemand ansehen könnte (Ich will jetzt keine Schleichwerbung oder so machen)
http://www.princeofdune.com ist die Adresse.

Ich danke schon mal im Vorraus.


----------



## Andreas Gaisbauer (1. Dezember 2003)

Hi,
ich befürchte da können wir nix machen. Irgendetwas sorgt für einen fehler in der MSHTML.dll - denke da hat der IE einen Bug. Ich werdes heute Nachmittag mal mit Mozilla anschauen - mal schauen was der sagt 

bye


----------



## chrisbergr (1. Dezember 2003)

Danke schon mal für die Antwort.
Nur komisch ist eben, dass - zumindestens bei mir - das nur im Gästebuch auftritt ..


----------



## Andreas Gaisbauer (1. Dezember 2003)

> _Original geschrieben von neurochrome _
> *Danke schon mal für die Antwort.
> Nur komisch ist eben, dass - zumindestens bei mir - das nur im Gästebuch auftritt .. *


Ist es die einzige Seite mit einem Formular? Das könnte theoretisch ein Grund sein  - ich hab aber gleich noch mehr schlechte Nachricht für dich: Unter Mozilla geht der Scrollbar überhaupt nicht - egal wo. Zum Schluss noch was positives: Ich hab in meinem Archiv noch einen Crossbrowser Scrollbar gefunden - ich häng ihn dir mal an - ist nicht von mir, kann aber leider keine Credits geben, da ich die Seite nicht mehr finde 

bye

//Edit: Schande über mich - is das gleiche Script wie das von Klon  - naja vielleicht is meines in einer neueren Version


----------



## chrisbergr (1. Dezember 2003)

Jap ist die einzigste seite mit formularen .. ich binde mal eben noch woanderst nen form ein, mal schaun ob es wirklich daran liegt ... Währe aber nicht schön


----------



## chrisbergr (1. Dezember 2003)

mh jetzt bin ich verwirrt . habe unter aboutme - askme ein faq system eingebunden, da ist auch nen formular drinne .. und hier geht das scrollen.
Das es an den Forms liegen würde, währe eine logische erklärung, dass es nur im gb nicht geht, aber jo, jetzt ist die theorie auch über den haufen geschmissen und joa, komisch eben.

Das mit dem Scrollen unter Mozilla .. auch komisch, das ging mal laut einem Kumpel .. nuja ich werde wohl einfach nochmal hingehen, das script nochmal neu einbingen genauso wie die Layer ...  

cya


----------



## chrisbergr (2. Dezember 2003)

Morgen!
Also ich habe es jetzt hinbekommen, dass die Scrollbar im IE, Netscape und Mozilla funktioniert, nur das Problem mit dem Gästebuch habe ich noch immer. Allerdings nur im IE.
Wie gesagt, ich habe auch andere Formulare in anderen Seiten eingebunden, da gab' es keine Probs, dann bin ich hingegangen und habe einfach mal das Formular aud dem Gästebuch rausgemacht, und es ging. Also steht definitiv fest, dass der Fehler genau an diesem einen Formular liegt. Nur versteh ich absolut nicht warum.

Vielleicht weiss ja einer eine Antwort darauf.

Gruss


----------



## Klon (2. Dezember 2003)

neurochrome benutze bitte den EDITIEREN Button um deine Beiträge zu ändern oder sie zu erweitern.


----------



## chrisbergr (9. Dezember 2003)

Alles klar, tut mir leid.

*Ehm, eine Frage noch an euch JS Profis:* 
Gibt es die Möglichkeit, mittels JS zu sagen, dass wenn ich das Scrollrädchen betätige, dieses Java Script, um das es hier geht, zu betätigen und den Layer scrollen zu lassen?
Das währe echt eine schöne Sache.


----------



## AliceD (22. Januar 2004)

ja das gleiche problem hab ich auch....scrolls funzen supi aber bei markierung von text und mausrad passiert nix ...schade eigentlich.

wenn jemand helfen kann wäre ich *sehr* dankbar!


----------

