Scorrimento degli elementi

Nella scorsa lezione, abbiamo visto come recuperare la posizione di un elemento. In questa lezione, invece, vediamo come recuperare la posizione della barra di scorrimento e come scorrere gli elementi della pagina o la pagina fino ad una posizione specifica.

I metodi .scrollLeft() e .scrollTop()

I metodi .scrollLeft() e .scrollTop() permettono di scorrere fino ad una posizione specifica nella pagina o in un elemento "scorrevole". .scrollLeft() permette di scorrere da sinistra verso destra del numero dei pixel indicati, .scrollTop() dall'alto verso il basso del numero dei pixel selezionati.

Sintassi dei metodi:

Recuperare la posizione della barra: $(selettore).scrollLeft() e $(selettore).scrollTop().
Scorrere di un numero di pixel: $(selettore).scrollLeft(valore) e $(selettore).scrollTop(valore). Il valore deve essere un numero, che corrisponde ai pixel di scorrimento.

Vediamo come recuperare la posizione della barra di scorrimento:

<div style="width:100px;height:100px;border:1px solid black;overflow:auto;font-size:20px">
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia
</div>
<button id="btn">La posizione della barra di scorrimento</button>
<script>
  $("#btn").click(function(){
    alert("Da sinistra: "+ $("div").scrollLeft() +"px");
    alert("Dall'alto: "+ $("div").scrollTop() +"px");
  });
</script>

Nell'esempio, utilizziamo un evento di click per far si che, quando l'utente clicca, la funzione viene eseguita (muovi la barra di scorrimento e clicca sul pulsante per capire il funzionamento).

Vediamo ora come scorrere nel <div>:

<div style="width:100px;height:100px;border:1px solid black;overflow:auto;font-size:20px">
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia
</div>
<button id="btn">Scorri a 100px in basso e 100px a destra</button>
<script>
  $("#btn").click(function(){
    $("div").scrollLeft(100);
    $("div").scrollTop(100);
  });
</script>

Scorrere nella pagina

Per scorrere nella pagina, puoi utilizzare sempre .scrollLeft() e .scrollTop(), ma usare document come selettore. Vediamo un esempio per capire:

<div style="width:1000px;height:2000px;border:1px solid black;overflow:auto;font-size:20px">
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia<br>
  Un testo con parole lunghissime: ambarabaciccicocotrecivettesulcomochefacevanolamoreconlafiglia
</div>
<button id="btn">Scorri a 500px in basso e 500px a destra</button>
<script>
  $("#btn").click(function(){
    $(document).scrollLeft(500);
    $(document).scrollTop(500);
  });
</script>

Prova!Completa gli spazi vuoti con il testo appropriato.

// Recupera la posizione dello scorrimento DALL'ALTO VERSO IL BASSO
// della pagina dell'utente

$(document).();

Prova!Scegli l'opzione corretta tra quelle elencate.

// Scorri a destra di 100px con jQuery

$(document).______(100);

	scrollTop
	scrollRight
	scrollLeft