Just nu i M3-nätverket
Jump to content
Eforum upphör 20 juni, klicka för att läsa vad som händer och om alternativ

egen scroll i en div

Ruben Ask

By Ruben Ask,
in Webbutveckling

Recommended Posts

Ruben Ask

Ruben Ask

Posted
Posted

Har en div som scrollas. Har fått till en klassisk "pil upp" "pil ner" för att scrolla som fungerar i både NS och IE.

 

Skulle vilja göra om det nu så att det är lite mer en <iframe linknade DIV där man har en vertikal scrollbar som man kan dra i och scrolla texten. Så man hela tiden ser hur mycket av den texten som som är "dold".

 

Men alltså inte använda iframe-lösningen! Jag söker en grafisk scroll som jag kan designa helt själv.. kanske en 5-10 pixlar bred eller 50-100 om jag känner för.

 

Nån som har nån pekare/länk ?

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

Hej, jag ändrade lite i mitt tidigare scrollscript och la till en scrollbar. Dock kan man inte dra i den än, men den fungerar i övrigt som den skall när man scrollar med knapparna:

 

http://81.26.253.111/examples/scrolllayer2.html

 

[log]

<html >
<head>
<script language="JavaScript">
dy=5;y=0;h=300;w=200;topY=00;
ky=0;oldKy;
var oLyr,oLyr2,oHndl,frac;
function DoScroll(sign) {
y+=dy*sign;
oldKy=ky;
ky+=frac*dy*sign;
if (y<0) 
	ky=y=0;
tmp=Math.max(0,oLyr.scrollHeight-h);
if (y>tmp) {
	ky=oldKy;
	y=tmp;
} 
oLyr.style.clip='rect('+y+'px '+w+'px '+(y+h)+'px 0px)';
oLyr.style.top=topY-y+'px';
oKnob.style.top=topY+ky+'px';
}
function ScrollIt(state,sign) {
if (state) {
	oHndl=setInterval('DoScroll('+sign+')',50);
} else {
	clearInterval(oHndl);
}
}
function Init() {
oLyr=document.getElementById("lyr");
oLyr2=document.getElementById("lyr2");
oKnob=document.getElementById("knob");
scrollH=oLyr.scrollHeight
containerH=300;
frac=Math.min(1,containerH/scrollH);
dh=300-containerH*frac;
oKnob.style.height=containerH*frac;
oKnob.style.top=topY;
}
</script>
</head>
<body style="overflow:hidden;" onload="Init();"> 
<img onmouseover="ScrollIt(true,-1);" onmouseout="ScrollIt(false);" style="position:absolute;left:305px;top:84px;" src="img/arrowUp.gif">
<img onmouseover="ScrollIt(true,1);" onmouseout="ScrollIt(false);" style="position:absolute;left:305px;top:400px;" src="img/arrowDown.gif">
<img style="position:absolute;left:305px;top:100px;height:300px;width:16px;" src="img/scrollContainer.gif">
<div style="border:1px solid black;position:absolute;left:100px;top:100px;width:200px;height:305px;">
<img id="knob" style="position:absolute;left:204px;top:200px;height:20px;width:16px;" src="img/scrollKnob.gif">
<div id="lyr" style="padding:5px;position:absolute;left:0px;top:0px;width:200px;clip:rect(0px 200px 300px 0px)">
LÄGG IN TEXT HÄR
==========
</div>
</div>
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing


×
×
  • Create New...