Javascript: Smooth Scroll

PROBLEMA:

Avete fatto una chat AJAX perfetta perfettina e la consegnate al Cliente tutti contenti.
Ma il Cliente (che ha sempre ragione) dice: «Mah, è bella sì, ma manca qualcosa…»
Voi, tuta blu dell’informatica, chiedete affranti: «Che cosa?» e pensate senza dirlo: «Manca quella bagascia puttana di tua nonna».
Il Cliente con quell’aria da sapiente alla Padrino di Marlon Brando che hanno tutti gli ignoranti quando non sanno bene cosa dire risponde: «Qualcosa… Ecco sì, qualcosa che la renda differente dalle altre!»

Come fare?

SOLUZIONE:

Ma non pigliamoci per il culo, suvvia.
Qualcosa, dice.
Avete studiato AJAX per gli ultimi 3 mesi ritagliandolo dal vs. tempo libero, avete usato le tecniche CSS all’ultima moda e il vostro PHP è degno di essere esposto al MOMA.
Qualcosa!
Per non parlare del Javascript veloce e snello…

Javascript…………..

GIÀ!

Il Cliente se ne fotte di AJAX, PHP, CSS, eccetera: lui sarebbe stato contento anche di una chat fatta con i frame (orrore e raccapriccio!) e di un’immagine grande 1600x1200px che fornisce lo sfondo.

Lui vuole vedere qualcosa di diverso!

Ora, quante chat avete visto che aggiornandosi andavano verso il basso dolcemente, senza scattare? Io nessuna.

LO SCRIPT:

  • Supponiamo che i pezzi di chat ricevuti dal server vengano messi in un <div id=”chatDiv”>
  • Supponiamo di avere una variabile booleana per abilitare/disabilitare lo scroll: scrollControl
  • Supponiamo di chiamare ad ogni aggiornamento della chat la funzione autoScroll(scrollControl)

Ripassiamo un attimo cosa sono div.scrollTop, div.scrollHeight e div.offsetHeight:


Siccome il vostro <div> è troppo piccolo
per visualizzare tutta l’altezza della chat siete costretti
a “scrollare” (toccare il clitorotellina del mouse)

La versione iniziale della funzione quando veniva chiamata prendeva brutalmente chatDiv.scrollTop e lo poneva uguale a chatDiv.scrollHeight.
function autoScroll(scrollControl){
if(scrollControl){
document.getElementById('chatDiv').scrollTop = document.getElementById('chatDiv').scrollHeight;
}
}

Brutto, brutto.

Cliente insoddisfatto :(

Portafoglio vuoto :'(

Nuova versione cool’n’smooth: fa la differenza fra scrollHeight e scrollTop, se questa è maggiore di offsetHeight incrementa scrollTop di qualche px e si riesegue dopo un breve intervallo di tempo (30ms).
function autoScroll(scrollControl){
if(scrollControl){
if (((document.getElementById('chatDiv').scrollHeight*1) -\
(document.getElementById('chatDiv').scrollTop*1)) >\
document.getElementById('chatDiv').offsetHeight) { //confronta con altezza del div
document.getElementById('chatDiv').scrollTop = (document.getElementById('chatDiv').scrollTop*1) + 3;
setTimeout('autoScroll(scrollControl)',30); // si esegue nuovamente dopo 30ms
}
}
}

Wow, dolce!

Cliente soddisfatto :)

Portafoglio anche :o)

6 thoughts on “Javascript: Smooth Scroll

  1. Ge scrive:

    Ciao..
    non so se ho sbagliato ma a me non va..
    ho messo codice tra gli head e onload=”autoScroll(scrollControl); nel body ma nada…

  2. sevencapitalsins scrive:

    Sono scarne come indicazioni per risolvere il problema!

    Usa Firefox e apri la console degli errori (Tools -> Error Console) per capire cosa non va nel codice javascript, se non ti dice niente fai una pagina con un <div id=”chatDiv”> di prova.

  3. Ge scrive:

    Uh ciao grazie per la risposta :) mi dice:

    Errore: illegal character
    File sorgente:
    Riga: 46, Colonna: 30
    Codice sorgente:
    if (((document.getElementById(’chatDiv’).scrollHeight*1) -\

    Errore: autoScroll is not defined
    File sorgente:
    Riga: 1

  4. sevencapitalsins scrive:

    Ho capito!

    Nel codice che ho inserito su, WordPress mi ha messo un “\” (backslash) ad ogni wordwrap!

    Devi fare così: ogni volta che compare un \, devi toglierlo e togliere anche l’ “a capo”.

    Ad esempio:

    linea molto \
    lunga che wordpress ha \
    spezzato

    diventa così:

    linea molto lunga che wordpress ha spezzato

  5. cri scrive:

    ma questo scrollHeight in firefox non va c’è un comando la alternativo?????????

  6. sevencapitalsins scrive:

    Magari c’è un metodo alternativo per ottenere lo stesso effetto, ma se non va scrollHeight su Firefox hai sbagliato qualcosa :o)

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: