Just nu i M3-nätverket
Jump to content

egen scroll i en div


Ruben Ask

Recommended Posts

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

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.



×
×
  • Create New...