Zum Inhalt springen

Das Horizontale Scrollen von DIV classes

Erstellt am 20. Oktober 2011 · 3 Antworten · letzte Antwort am 22. Oktober 2011

Tags: Frage

AlexanderS.​ ·

Hallo,

ich probiere mit Typo3 ein Digitales Schwarzes Brett zu realisieren. Dabei stehe ich nun vor dem folgenden Problem.
Ich würde gerne bei mehreren Beiträgen untereinander, das Div mit overflow:auto um Scrollingleisten erweitern lassen. Diese sollen dann mit einer bestimmten Geschwindigkeit nach unten scrollen. Dazu habe ich mir in JaveScript auch das ein oder andere Codeschnipsel gebastelt:

i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("c1")

div.scrollTop = i

if (i > div.scrollHeight - 160) {i = 0}

}

Leider funktionert dieses JaveScript nur für einzelnen DIVs. Laut meinen Informationen ist in Typo3 aber jeder Beitrag in ein eigenes DIV gehüllt.
Ich bräuchte aber eine Funktion die es mir ermöglicht einen ganze DIV Class scrollen zu lassen.
Um das ganze etwas zu verdeutlichen habe ich ein Übersichtsbild angehängt. Hier ist Nummer 1 und Nummer 2 in der gleichen DIV Class aber es sind unterschiedliche DIVs.

Gerne bin ich auch für andere Lösungen offen, es müsste eben möglich sein das man ohne den Einsatz von Eingabegeräten zwischen einer großen Liste von Beiträgen scrollen kann.

Mit freundlichen Grüßen

AlexanderS.

Startseite.jpg

Chrissli ·

Hallo Alexander,

dein Beispiel ist veständlich, hat aber einen Haken:
Ohne den HTML-Code lässt sich leider nicht viel sagen wie du dein
Javascript anpassen könntest, damit das passt.
Online ist die Seite noch nicht, oder?

Ansonsten könntest du dein Template oder Typoscript anpassen,
damit der zu scrollende Inhalt in ein eigenes, immer gleiches
DIV gepackt wird, dass du dann scrollen lässt.

AlexanderS.​ ·

Hallo,

ich habe mal alle wichtigen Dateien angehängt (ich hoffe es waren alle).

Ich habe es als ZIP Datei gepackt.

Ich hoffe das hilft weiter.

Du müsstest mir aber bitte einen Wink mit dem Zaunpfahl geben, ich bin sehr neu auf dem Gebiet.

Mit freundlichen Grüßen

Alexander Schuhmann

Typo3.zip
3kB
Chrissli ·

Soweit ich das sehe,

steht der zu scrollende Inhalt
ausnahmslos im div

<div class="col linkespalte alignjustify"></div>

Mach doch daraus einfach

<div id="scroll-anchor" class="col linkespalte alignjustify"></div>

und gibt im Javascript als ElementID anstelle von "c1" das Übergeordnete
"scroll-anchor" an.