✔ Scrollrichtung in vertikal ändern

[thecamillo]

Hallo JS und AJAX Gurus,

bin relativ neu dabei und versuche derzeit einen vertikalen Scroller zu erstellen und habe mich an einem Beispielcode orientiert, doch leider funktioniert ein vertikales scrollen nicht auch nach dem ich die 2. variable auskommentiert hatte um nur die erste zu nutzen. Mir fällt einfach nicht ein wie ich eine vertakale Scrolleigenschaft zuweise!

Vielleicht kann mir ja einer von euch helfen oder kennt eine Plattform wo ich mir mehr Backgroundwissen über dieses oder ein ähnliches Projekt nachlesen kann:

Hier mein Beispielcode:
------------------------------------------------------------------------------------------------------------
var scroll1 = new Scroller('drag', {area: 150, velocity: 1});
var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1});

// Drag
$('drag').addEvent('mousedown', function() {
this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move');
scroll1.start();
});
$('drag').addEvent('mouseup', function() {
this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move');
scroll1.stop();
});


// Mousemove
$('mousemove').addEvent('mouseover', scroll2.start.bind(scroll2));
$('mousemove').addEvent('mouseout', scroll2.stop.bind(scroll2));
------------------------------------------------------------------------------------------------------------
mfg thecamillo

 

[con-f-use]

Wo hast du denn dieses Script her. Da fehlt gewaltig was, wenn das funktionieren soll.

Vielleicht hilft dir ja dieses Script von mir weiter. Es sollte zumindest das Prinzip etwas veranschaulichen. Eifnach mal in den Quelltext schauen. Auf der dazugehörigen Seite sind übrigens eine Menge Scripts, die immer wieder hier verlangt werden. Will sagen, du könntest das nächste Mal auch die Forensuche in betracht ziehen.

 

[thecamillo]

hier noch dem HTMLaufbau:



<h3>Drag (Mousedown, Mouseup)</h3>
<div id="drag">
<div class="inside drag"></div>
</div>

<h3>Mousemove</h3>
<div id="mousemove">
<div class="inside move"></div>
</div>

und noch den CSS-Aufbau:



#mousemove, #drag {
width: 500px;
height: 300px;
border: 1px solid #000;
overflow: auto;
margin: 0 auto;
}

#drag {
cursor: url(openhand.cur), move;
}

.inside {
width: 2000px;
height: 1000px;
}

.move {
background: #eee url(pattern1.gif);
}

.drag {
background: #333 url(pattern2.gif);
}

Hatte vergessen zu erwähnen, dass es zwei unterschiedliche Funktionen sind! Bei der ersten Mouse1 muss man selbst die Scrollbalen verscheiden bei Mouse 2 was ich eigentlich auch erzeilen wollte den Effekt nur auch die Richtung meiner mousebewegung einzugehen.

Danke für deinen Link bin gerade auf der Seite und bin am lernen!

danke thecamillo