Javascript scroll, scrollbar

5 svar · 689 visningar · startad av nummersju 19 nov. 2007

nummersjuMedlem sedan aug. 2005198 inlägg

Frågan19 nov. 2007 19:16#1

Hej hej!
Jag har för mig att jag sett en scrollbar gjorde i javascript där innehållet man klickar sig neråt och texten flyter upp... Är det någon som förstår hur jag menar, lite luddigt förklarat. :)

Eller om det var så att man klickade på länken man ville till och texten scrollade iväg ner eller upp till innehållet man vill komma till.

Fanna även andra häftiga saker man kunde göra med javascript och css på denna sida.

Någon som vet vilken jag menar och kanske har den sidan sparad i sina favoriter kanske? :)

/R
Trodde först att jag hittat rätt, denna sida: http://demos.mootools.net/ men den funktionen jag söker finns inte där. Någon?

/R 2

Det är så här jag menar, fast med javascript :)

http://www.pkhuset.com/

OkkidoMedlem sedan maj 20007 492 inlägg

19 nov. 2007 20:33#2

Jag är ganska säker på att mootools har funktionen du efterfrågar. Dock är det kanske onödigt att inkludera ett helt javascript-framework om "smooth scroll" är det enda du tänker använda dig av.

Här är ett exempel:
http://www.kryogenix.org/code/browser/smoothscroll/

En sökning på google efter "smooth scroll" ger dig många resultat.

/r efter att ha sett sidan du länkade till är mitt svar inte helt hundra, även om du kan uppnå effekten med sidan jag länkade till.

/r
http://www.roscripts.com/uploads/smooth_scroll/index.html ett exempel närmre det du efterfrågade.

nummersjuMedlem sedan aug. 2005198 inlägg

19 nov. 2007 20:40#3

Tack Okkido!
Med lite speed så blir det där super! :)

nummersjuMedlem sedan aug. 2005198 inlägg

19 nov. 2007 20:59#4

Prova gärna hur detta fungerar.

http://johanpersson.eu/temp/scroll/index.html

nummersjuMedlem sedan aug. 2005198 inlägg

19 nov. 2007 21:55#5

Behöver lite mer hjälp av någon som är lite Javascriptkunnig kanske.
Kolla länken igen.

Har lagt till koden i en div med overflow: hidden. Och undrar varför smothscroll funktionen slutar att fungera då.

<div style="width: 300px; height: 500px; overflow: hidden;">

Någon som kan hjälpa mig att få javascript-scrollen att fungera i en begränsad div?

headbugMedlem sedan sep. 2006867 inlägg

27 nov. 2007 16:22#6

För att det ska fungera måste du använda dig av Fx.Scroll.

SmoothScroll är en specialskriven snabbfunktion för att du enkelt ska kunna få till scroll i "enkla" fall. Ditt fall är lite svårare och beskrivs i detalj här: http://clientside.cnet.com/wiki/mootorial/05-effects#fx.scroll.js

Förutsatt att du har en mootools som definierar Fx.Scroll så kan du testa mitt exempel (det har du ju såklart eftersom SmoothScroll bygger på den...) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="j/mootools-release-1.11.js"></script>

<link href="c/master.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a href="#" id="top"></a>
<a href="#" onclick="winScroller.toElement('ett');">Ett</a>
<a href="#" onclick="winScroller.toElement('tva');">Två</a>
<a href="#" onclick="winScroller.toElement('tre');">Tre</a>

<div id="wrap">

<br />
<a name="ett" id="ett" href="#top" onclick="winScroller.toTop();">Ettan</a>
<p>En massa text En massa text En massa text </p>

<a name="tva" id="tva" href="#top" onclick="winScroller.toTop();">Två</a>
<p>En massa text En massa text En massa text </p>

<a name="tre" id="tre" href="#top" onclick="winScroller.toTop();">Trea</a>
<p>En massa text En massa text En massa text </p>
<p>
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
</p>
</div>
<script type="text/javascript">
<!-- 
var winScroller = new Fx.Scroll($('wrap'));
-->
</script>

</body>
</html>

och i min CSS-fil har jag bara definierat

#wrap {
 margin: 0 auto;
 height: 400px;
 width: 400px;
 overflow: auto;
}

och js-filen får du ändra länken på så att den passar din fil.