Für Liebhaber von beeindruckenden JavaScript-Spielereien. Dieser Artikel zeigt eine schicke und flotte Lösung, die einen festgelegten Bereich ruckelfrei vertikal bewegt und dabei gänzlich auf Scrollbalken des Browsers verzichtet. Ideal für design-orientierte Projekte.
Eingeschränkte Gestaltung
Die Scrollleiste der meisten Browser lässt sich zwar farblich umgestalten, die Breite des Balken beziehungsweise die Pfeiler dagegen nicht im geringsten. Für schmale Bereiche eines Layouts eignen sich grobe Pfeiler nur bedingt, schränken kreative Umsetzungen ein und sind alles andere als ein Schmuckstück.
Screenshot der Umsetzung
Ausgereifte Alternative
Als Gegenvorschlag werden eigene Bildlauf-Elemente implementiert, die beim Berühren einen markierten Abschnitt rauf und runter bewegen. In unserem Beispiel sind die Schaltflächen in Form eines Quadrats. Dazwischen liegt eine optische Scrollbar, die alternativ problemlos ausgeblendet werden kann. Das Aussehen der Knöpfe lässt sich mit entsprechenden CSS-Eigenschaften anpassen – es muss nicht immer schwarzweiss und eckig sein.
XHTML-Seite der Alternativlösung
<html>
<head>
<style type="text/css">
p, div {
padding: 0;
margin: 0;
}
#content {
clip: rect(0 300px 60px 0);
width: 300px;
position: absolute;
}
.scroller {
float: right;
width: 10px;
}
.scroller .arrow {
border: 1px solid black;
cursor: pointer;
padding: 4px;
}
.scroller .bar {
height: 50px;
margin: 2px;
border: 1px solid black;
padding: 0 2px;
}
</style>
</head>
<body>
<div class="scroller">
<p class="arrow" onmouseover="scroll.start(-10)" onmouseout="scroll.stop()" title="Nach oben"></p>
<p class="bar"></p>
<p class="arrow" onmouseover="scroll.start(10)" onmouseout="scroll.stop()" title="Nach unten"></p>
</div>
<div id="content">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam
</div>
<script src="scroll.class.js" type="text/javascript"></script>
<script type="text/javascript">
var scroll = new SCROLL(
document.getElementById('content'),
{
'time': 60,
'width': 300,
'height': 60
}
);
</script>
</body>
</html>
Erklärung des Quelltextes
Der zum Scrollen vorgesehene Sektor bekommt in unserem Fall eine feste ID content. Auf diese ID beziehen wir uns an zwei Stellen: In den CSS-Angaben und beim Initialisieren des Scrollings mittels JavaScript.
CSS-Angaben
In den StyleSheets werden die Eigenschaften für den scrollbaren Bereich (#content) und die Scrollleiste selbst (.scroller) festgelegt. Im Beispiel beträgt die Breite des Bereichs 300px und die Höhe 60px. Diese Werte sind auch im JavaScript-Part der Seite (siehe nächsten Punkt) einzugeben.
JavaScript-Aufruf
Im unteren Teil der Seite wird per JavaScript die fürs Scrolling zuständige Bibliothek scroll.class.js nachgeladen – der Inhalt dieser Datei ist weiter unten zu finden. Anschließend wird die Scroll-Klasse mit den notwendigen Parametern initialisiert: time steht für Geschwindigkeit des Bildlaufs.
width und height sind Daten aus den StyleSheet-Definitionen, können aber für diverse Effekte oder Experimente auch abweichen oder gänzlich entfallen.
Tipp am Rande
Die Pfeile sind mit einem Funktionsaufruf scroll.start(X) ausgestattet, wobei X für die Tiefe des Sprungs innerhalb des Segments steht. Ein negativer Wert bewegt den Content nach oben, positiver entsprechend nach unten.
Inhalt der scroll.class.js
SCROLL = function(obj, attr) {
var interval;
var offset = {
'top': obj.offsetTop || 0,
'height': obj.offsetHeight || 0
};
this.start = function(amount) {
/* Default setzen */
attr.top = attr.top || 0;
attr.width = attr.width || "auto";
attr.height = attr.height || "auto";
/* Intervall starten */
interval = setInterval(
function() {
move(amount);
},
attr.time
);
};
this.stop = function() {
if (interval) {
clearInterval(interval);
}
}
function move(amount) {
/* Werte refreshen */
attr.top += amount;
attr.height += amount;
offset.top -= amount;
/* Grenze überschritten? */
if (attr.top < 0 || attr.height > offset.height) {
attr.top -= amount;
attr.height -= amount;
offset.top += amount;
return;
}
/* Object bewegen */
obj.style.clip = "rect(" + attr.top + "px " + attr.width + "px " + attr.height + "px 0)";
obj.style.top = offset.top + "px";
}
}
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Hallo,
ich hoffe das mir jemand bei meinem problem helfen kann, auch wenn der beitrag schon ziemlich alt ist.
und zwar möchte ich die weiße Quadrate durch Grafiken ersetzen. Wie mach ich das?
ich dachte mir eigendlich, das ich einfach nur im css bei:
.scroller .arrow {
border: 1px solid black;
cursor: pointer;
padding: 4px;
}
die grafik per background-image: url(); einbinden kann. Das funktioniert aber nicht.
hat jemand eine idee?
vielen Dank schonmal in vorraus