Wie kommt es mit JQuery Maurerarbeit, wenn ich "zurück" auf den Browser klicke, schießt es den Benutzer zurück an die Spitze?

Question

Warum kann es nicht die Position halten, an der der Benutzer aufgehört hat? Ist das normal für die Freimaurerei? Wenn der Benutzer zurückklickt, geht der Browser dorthin, wo der Benutzer aufgehört hat, aber seltsamerweise macht Maonry es SCHIOT zurück an die Spitze!

Übrigens funktioniert Refresh gut. Es bewegt die Schriftrolle dorthin, wo der Benutzer aufgehört hat. Aber zurück geht nicht.

Edit: wenn ich auf "zurück" klicke, ist es oben. Aber dann scrolle ich nur ein kleines bisschen runter (2 Pixel). Und dann springt der Browser zurück zu der Position des linken Platzes.

ures.

Edit: Wenn ich diese Zeile deaktivieren, wird es funktionieren:

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false }); 

Answer 1

Ich denke, ich habe einen Workaround für Sie, aber Sie müssen es versuchen, um sicher zu sein. Es funktioniert, wenn ich den Code manuell durchführe, und ich denke, es wird funktionieren. Ich werde es am Ende erklären.

Vor der Codezeile, wo Sie das masonry() Plugin aufrufen ...

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false }); 

... die Höhe des Gitters auf seine aktuelle Höhe einstellen.

var $grid = $('#grid'); 
$grid.height($grid.height()); // fix the height at its current height 

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false }); 

Wenn das gibt Ihnen Problem, wenn Sie zunächst laden, oder in einigen Browsern, dann versuchen, die .height() Einstellung nur dann, wenn es größer als ein Betrag ist. Versuchen Sie 0 oder eine kleine Zahl wie 250.

var $grid = $('#grid'); 
var height = $grid.height(); 

if(height > 0) { // or some other number 
    $grid.height(height); 
} 

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false }); 

Die Ursache des Problems zu sein scheint, weil masonry die Positionierung der einzelnen Elemente zu absolute setzt, dann geht es durch sie und setzt seine top und left Positionen manuell zu, was auch immer sie waren, bevor sie absolute Positionierung erhalten.

Das Problem ist, dass bis masonry eine Chance hat, die Positionen zu setzen, die #grid wird, da die Elemente 0 Höhe kollabierte im Inneren nicht mehr seine Höhe beeinflussen.

Es scheint, als ob in einigen Browsern, wenn die Höhe des #grid (und damit den Rest des Dokuments) zusammengebrochen ist, es seine Bildlaufposition vergisst. Deshalb fixieren wir seine Höhe auf einen festgelegten Wert vor Aufruf masonry(), so dass es nicht zusammenfällt, wenn sein Inhalt absolute Positionierung erhält.

Answer 2

Dies wird Ihnen helfen,

ich einen Beitrag mit dem gleichen senario gefunden und einen Test der Arbeits

Hallo, Die Website ist http://www.charlotte.com/mld/charlotte/

Ich habe nur überprüft und ja, Die Site sendet Cache-Control: No-Store in der Kopfzeile.

Ich lese auch durch den Bug-Link, den Sie gepostet haben. Mann, diese Sache ist seit Jahren dokumentiert. Der bestimmte Link, den Sie gepostet haben, scheint immer noch nicht aufgelöst zu sein, und er ist primär, kein Betrüger.

Wäre es hilfreich, wenn ich meine Erfahrung dem Fehlerbericht hinzufüge, oder sollte ich nur grinsen und es ertragen?

Answer 3

Sind Sie sicher, dass dies ein Problem durch Mauerwerk verursacht? Hat die Seite früher mit der Zurück-Taste funktioniert? Laut BalusC Kommentar scheint das Problem von Browser zu Browser zu variieren und wie von Herrn bestätigt. Chavan, die Seite sendet Cache-Control: no-store, also lehne ich mich an Server-Software oder Konfiguration, die es eher als Mauerwerk verursacht.

Es ist ein dokumentiertes Verhalten für verschiedene Browser, wenn die HTTP-Antwort über bestimmte Header Cache-Control: verfügt. (Kurz: FF geht auf no-store nach oben - oder no-cache wenn HTTPS verwendet, IE nicht Cache-Control auf der Rückseite nicht einlöst.)

Sie können Cache-Header gesetzt entweder in HTTP-Server (Apache, Lighttpd, etc.) oder in Code. Jede web-bezogene Sprache hat ihre Methoden, HTTP-Header zu setzen, die richtige Lösung, um das Problem zu beheben, hängt von der Umgebung ab, die Sie haben.

This SO post bietet einige Lösungen, einschließlich einiger esoterischer Methoden zum Speichern der Seitenrollenposition mit JS und Cookies.