Διακριτικό πρόγραμμα για τη διατήρηση κατάστασης κυλιόμενου

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Διακριτικό πρόγραμμα για τη διατήρηση κατάστασης κυλιόμενου

Δημοσίευση από cherouvim » 28 Μαρ 2006 17:04

Και μετά από αυτό το περίεργο τίτλο ας δούμε μία πιθανή λύση σε ένα κλασικό πρόβλημα των διαδικτυακών εφαρμογών. Πολλές φορές έχουμε κάποιο div ή table το οποίο (με overflow: auto) έχει εμφανίσει τις μπάρες κύλισης. Πατώντας σε κάποια διασύνδεση (link) μέσα σε αυτό το επίπεδο ξεκινάμε ένα νέο request/response με το server. Η οθόνη ανανεώνεται, τα νέα δεδομένα εμφανίζονται, αλλά οι κυλιόμενες μπάρες του επίπεδο έχουν αρχικοποιηθεί στο "top". Εάν το div αυτό είχε 3000 εικονοστοιχεία ύψος (πολλά δεδομένα), πρέπει να κυλίσουμε ξανά την κάθετη μπάρα για να βρεθούμε εκεί που ήμασταν.

Αυτό το script κάθεται πάνω στην εφαρμογή, και στο το στοιχείο του οποίου θέλουμε (το έχουμε δηλώσει με id="overflow") να διατηρήσουμε την κατάσταση, θα επισυνάψει την ιδιότητα scrollTop στις παραμέτρους του URL. Όταν θα φορτώσει η σελίδα, θα θέσει το scrollTop του επιπέδου στην τιμή που ήρθε από τις παραμέτρους (GET).

Κώδικας: Επιλογή όλων

 function init() { 
    if(document.getElementById && document.createTextNode) { 
        var overflow = document.getElementById('overflow'); 
        overflow.scrollTop = getLastUrlParam(); 
        var as = overflow.getElementsByTagName('a'); 
        for&#40;var i=0, length=as.length;i<length;i++&#41; &#123; 
            as&#91;i&#93;.onclick= function&#40;&#41; &#123; 
                this.href = addUrlParam&#40;this.href, '_s', overflow.scrollTop&#41;; 
            &#125; 
        &#125; 
    &#125; 
&#125; 

addUrlParam = function&#40;href, key, value&#41; &#123; 
    return href+&#40;href.split&#40;'?'&#41;.length==1?'?'&#58;'&'&#41; + key + '=' + value; 
&#125; 

getLastUrlParam = function&#40;&#41; &#123; 
    var parts = location.href.split&#40;'='&#41;; 
    return parts&#91;parts.length-1&#93;; 
&#125; 

window.onload=init; 
To script θέλει πολλές βελτιώσεις, όπως το να ενεργοποιείται από οποιοδήποτε σύνδεσμο μέσα στη σελίδα, και όχι μόνο από συνδέσμους μέσα από αυτό, να υποστηρίζει πολλά overflows, οριζόντια κύλιση, και να φορτώνει αμέσως όπως περιγράφει ο guru εδώ.

Live demo @ http://temp.cherouvim.com/forums/overflow

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Διακριτικό πρόγραμμα για τη διατήρηση κατάστασης κυλιόμενου

Δημοσίευση από skeftomilos » 28 Μαρ 2006 23:41

Ωραίο κόλπο. :) Χρήσιμο για επιμέρους στοιχεία της σελίδας. Για ολόκληρη τη σελίδα ο άλλος guru (ο πραγματικός :P) σε ένα πρόσφατο άρθρο του συνιστά να παραμένει στην αρχή μετά το φόρτωμα (Avoid Within-Page Links).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης