[FRAGE] Div's beim Scrollen horizontal verschieben

[morhinio]

Hallo,

ich möchte gerne zwei Div's (rot und grün) beim Scrollen nach links bzw. rechts verschieben, damit ein drittes Div (gelb) dazwischen durchlaufen kann.
Ich habe schon etwas herumexperimentiert, allerdings passt das Ergebnis noch nicht ganz.
Demo

Problem
Die Verschiebungen der beiden Div's (rot und grün) scheinen nicht immer gleich zu sein. Je nachdem wie ich den Scrollbalken bewege funktioniert es einmal, ein anderes Mal überschneiden sich die Div's.

Hat jemand einen Tipp oder sieht einen Fehler meinerseits.

 

[kkapsner]

Dein Problem liegt daran, dass du die rote und grüne Box auch in der Horizontalen mit festen Werten fixed positionierst. Das beschehrt dir dann natrülich Probleme, wenn das Browserfenster mal einen andere Breite hat.

Um das zu umgehen, kannst du einen kleinen Trick anwenden: du gibst den beiden keinen left/right Wert und packst sie in zwei absolut positionierte Elemente, die sich dann an dem Gelben orientieren: Edit fiddle - JSFiddle

 

[morhinio]

Vielen Dank für deine Hilfe. So funktioniert es.

 

[kkapsner]

Bitte - gern geschehen.

 

[morhinio]

Ich wollte das Script gerne auf einem Tablet, sprich mit einem touch-Event einsetzen.

Das zu verschiebende Element (rote Box) wird nicht "fließend" verschoben bzw. erst verzögert.

Ich habe es schon mit $(document).bind("touchmove", function(e) versucht. Leider stehe ich aber gerade auf dem Schlauch.

 

[kkapsner]

In welchem Browser auf welchem Tablet genau hast du das probiert. Eigentlich sollte das onscroll-Event sich da genauso verhalten.

Hast du einen Testlink oder verwendest du das Fiddle genau so, wie es ist?

 

[morhinio]

Ich habe es mit einem Samsung Galaxy Tab 3 und Firefox getestet.

Wenn ich es auf Fiddle teste funktiomiert es. Übernehme ich den Code auf die lokale Umgebung, ist der Scroll-Effekt verzögert.

Ich habe die Testdatei hochgeladen.

 

[kkapsner]

lokale Umgebung

Was heißt das genau?

 

[morhinio]

Auf einem lokalen Webserver. Die Demo ist nicht extern, sprich über eine Domain, aufrufbar.

 

[kkapsner]

Was heißt genau lokal? Auf dem Tablet oder lokal in deinem privaten Netzwerk.

 

[morhinio]

Das eine schließt das andere nicht aus. Ich habe es auf einem Tablet innerhalb eines lokalen Netzwerkes gestestet.

 

[kkapsner]

Nein, ich meine wo der lokale Webserver läuft. Läuft der auf dem Tablet oder auf einem anderen Rechner im lokalen Netzwerk?

 

[morhinio]

Ah, ich verstehe.
Der Werbserver läuft auf einem lokalen Server. Von da aus rufe ich das Script bzw. die Seite per Tablet bzw. Desktop-PC auf.

 

[kkapsner]

Hm... das ist seltsam.

Kannst du mal die gleiche jQuery-Version wie beim fiddle verwenden. Eventuell liegt es daran.

 

[morhinio]

Ich habe es mit der gleichen Version getestet. Ohne Veränderung.

Allerdings ist mir folgendes aufgefallen.
Mit dem Chrome auf dem Tablet funktioniert es ohne Probleme.
Mit dem Firefox auf dem Tablet funktioniert es nicht.

 

[kkapsner]

Da ich kein Tablet hab', mit dem ich das reproduzieren könnte, kann ich dir da jetzt leider nicht mehr weiterhelfen... scheint mir aber ein Performanceproblem zu sein. Wobei mir jetzt im Code nichts auffällt, das das verursachen könnte.