zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Div's beim Scrollen horizontal verschieben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2014, 12:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2007
Beiträge: 2
insider befindet sich auf einem aufstrebenden Ast
Frage Div's beim Scrollen horizontal verschieben

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2014, 13:30
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

So?
Edit fiddle - JSFiddle

Wie sollen die Div´s bei dir denn immer gleich verschoben werden, wenn du mit die Variable s dynamisch berechnen lässt. Die ändert sich ja immer je nachdem wie weit du runtergescrollt hast.

z.B.: 10px nach unten gescrollt --> verschiebung 5.2 * 10 = 52px
20px nach unten gescrollt --> verschiebung 5.2 * 20 = 104px


Wenn ich das richtig interpretiert habe...

Geändert von leex279 (21.06.2014 um 13:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2014, 14:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

Ich sehe das Problem eher darin, dass du immer um einen festen Wert verschiebst. Aber je nach Breite des Anzeigefensters ist die linke/rechte Ecke der mittleren Box wo anders.

Statt dieser ganzen jQuery-Methoden würde ich mal auf ein Paar native Befehle zurückgreifen. Mit offsetLeft und offsetWidth bekommst du die Pixelpositionen der Boxen. So kannst du mit jedem window.onresize die Position berechnen, die die Boxen haben müssen, wenn sie neben der mittleren Box sind.

Für die eigentliche Animation würde ich dann mit einem [0, 1]-Wert arbeiten.
Also:
Code:
linkeBox.style.left = - linkeBox.style.offsetWidth + mittlereBox.style.offsetLeft * s + urspruenlichePositionVonLinkerBox * (1-s) + 'px';
urspruenlichePositionVonLinkerBox ist dann im onload linkeBox.style.offsetLeft + linkeBox.style.offsetWidth;

Hier liegt s jetzt zwischen 0 und 1. Bei 0 ist die Box an ihrer alten Stelle, bei 1 neben der mittleren Box und für Werte dazwischen eben dazwischen.

Die Fragliche Zeile musst du jetzt eben im onresize und im onscroll aufrufen. Das s muss im onscroll berechnen werden.

Achja: Wenn die Boxen unterschiedliche offsetParents haben, kann die Berechnung mit offsetLeft falsch werden. Dann musst du noch mehr Code für die Positionsberechnung schreiben

Geändert von MitjaStachowiak (22.06.2014 um 14:51 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
scroll, scroll to, scrolltop, verschieben

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
scrollen innerhalb eines divs chopsui Javascript & Ajax 4 08.12.2009 21:55
Divs horizontal anordnen, mit <li>, float? funky^mariechen CSS 12 29.08.2008 02:08
Innerhalb eines DIV's mit Hotspot scrollen TimoF Javascript & Ajax 2 03.06.2008 15:43
Problem: 3 Div's horizontal positionieren Krieju CSS 2 07.05.2004 17:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:27 Uhr.