giovedì 28 febbraio 2008

JavaScript e lo scroll

Avete presente quando, scorrendo una lunga pagina web, fate clic su un (apparentemente) innocuo link o su un (altrettanto apparentemente) innocuo pulsante che modifica solo una parte della pagina, ma che effettua anche la POST o la GET e - conseguentemente - il reload della pagina e - alla fine - vi riporta in cima alla pagina stessa?

Per evitare questo fastidioso problema si può usare un po' di JavaScript. Ho trovato un interessante frammento di codice su 4GuysFromRolla, e l'ho solo leggermente modificato per usare i cookie anziché gli hidden input per il passaggio dei parametri:

// Recupera le coordinate e le salva nei cookie
function sstchur_SmartScroller_GetCoords()
{
  var scrollX, scrollY;
          
  if (document.all)
  {
    if (!document.documentElement.scrollLeft)
    {
      scrollX = document.body.scrollLeft;
    }
    else
    {
      scrollX = document.documentElement.scrollLeft;
    }
    if (!document.documentElement.scrollTop)
    {
      scrollY = document.body.scrollTop;
    }
    else
    {
      scrollY = document.documentElement.scrollTop;
    }
  }   
  else
  {
    scrollX = window.pageXOffset;
    scrollY = window.pageYOffset;
  }
       
  createCookie("scrollX", scrollX, 1);
  createCookie("scrollY", scrollY, 1);
}

// Riposiziona la pagina alle coordinate salvate nei cookie
function sstchur_SmartScroller_Scroll()
{
  var x = readCookie("scrollX");
  var y = readCookie("scrollY");
  window.scrollTo(x, y);
}

// Associa l'operazione di riposizionamento all'evento di reload della pagina
window.onload = sstchur_SmartScroller_Scroll;

/* 
 * Associa l'operazione di salvataggio delle coordinate 
 * a ogni evento che possa modificarle
 */
window.onscroll = sstchur_SmartScroller_GetCoords;
window.onkeypress = sstchur_SmartScroller_GetCoords;
window.onclick = sstchur_SmartScroller_GetCoords;

NOTA: richiede le funzioni per la gestione dei cookie

NOTA: benché l'articolo originale usasse lo script nell'ambito ASP.NET può essere inserito in qualunque contesto

Nessun commento: