2009-04-19 8 views
1

Ich versuche, jQuery.scrollTo Plugin mit Akkordeon zu verwenden (wo ein Block nach dem Klicken auf es und andere Verträge erweitert), aber es scrollt nicht zur richtigen Position. HierscrollTo scrollt nicht zur korrekten Position

ist eine Demo: pelmeshkin.com/temp/scrolltoaccoridon

Wie Sie sehen können, werden die ersten Klick scrollt richtig, aber jeder nächste geht weiter als es sollte.

Es scheint Anfangsposition des Ziels zu verwenden (wo es vor der Expansion/Kontraktion war), was Sinn macht, da beiden Ereignisse zur gleichen Zeit initiiert werden, aber selbst wenn ich versuche, scrollTo zu anhalten und warten, bis die slideUp/slideDown Übergang ist vorbei, es verhält sich immer noch gleich. :(

Antwort

3

Ok, ich irgendwie gelöst es selbst. ich erste Positionen aller anklickbare Elemente auf Pageload finden unter Verwendung von Offset(), so dass sie in gestellt hatten, und dann füttern diese als Pixelwerte zu scrollTo auf Click-Ereignis.

Auf diese Weise geben wir scrollTo genaue Pixel-Positionen, um auf der Seite zu scrollen, anstatt sich darauf zu verlassen, um es aus der Element-ID selbst zu berechnen. So sieht es am Ende aus: pelmeshkin.com

+1

altCognitos Antwort revidiert nur, was ich bereits in meiner Frage gesagt hatte, aber keine praktische Lösung. Da es keine Antworten mehr gibt, bietet mir zumindest eine mögliche Lösung, die jemandem helfen kann, der das gleiche Problem hat und diesen Beitrag findet. Oder gibt es eine Regel über Stackoverflow gegen das Akzeptieren der eigenen Antworten? – pelmeshkin

4

Da es die Position basierend auf dem Standort berechnet, bevor die Animation auftritt. Nicht sicher, wie Sie damit umgehen würden, um ehrlich zu sein, außer vielleicht an der internen Berechnung zu basteln, die wahrscheinlich keine einfache Sache ist.

+0

Danke! Ja, ich glaube nicht, dass ich mich darauf einlassen möchte :) Vielleicht könnte ich zuerst mit dem Scrollen leben und erst dann über einen Callback expandieren/kontrahieren, aber ich bin mir nicht sicher, wie ich 'dieses' Objekt an die Rückrufen. So etwas funktioniert nicht: $ .scrollTo ($ (this), 1000, function() {// erweitern (this); // Vertrag (nicht (this)); }); – pelmeshkin

0

Alter. N.S.F.W.

Und nach einem bisschen auf Effect.ScrollTo Hacking um:

Effect.LazyScrollTo = function(element) { try { 
    var options = arguments[1] || { }; 
    scrollOffsets = document.viewport.getScrollOffsets(); 
    elementOffsets = $(element).cumulativeOffset(); 

    if (options.offset) elementOffsets[1] += options.offset; 

    return new Effect.Tween(null, 
    scrollOffsets.top, 
    elementOffsets[1], 
    options, 
    function(p){ 
     try { 
     this.lazy_offset = this.lazy_offset || $(element).cumulativeOffset(); 
     scrollTo(scrollOffsets.left, (p.round() - (elementOffsets[1] - this.lazy_offset[1]))); 
     } catch(e) { 
     alert(e); 
     } 
    }.bind(this) 
); 
} catch(e) { alert(e); }} 

Und dann an anderer Stelle ...

new Effect.SlideDown('tab1-body', {queue: 'end'}); 
new Effect.LazyScrollTo('tab1-heading', {queue: 'end'}); 

Frohes neues Jahr.

+0

... aber deine Lösung funktioniert ... also danke :) –

Verwandte Themen