Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

egen scroll i en div

Ruben Ask

Startad av Ruben Ask,
i Webbutveckling

Rekommendera Poster

Ruben Ask

Ruben Ask

Postad
Postad

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 ?

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...