Lo scorrimento consente agli utenti di visualizzare le pagine Web/documenti lunghi a sinistra ea destra o su e giù. Può essere eseguito mediante l'aggiunta di barre di scorrimento orizzontali e verticali a seconda del contenuto. Le dimensioni della barra di scorrimento come l'altezza e la larghezza sono impostate per impostazione predefinita. Tuttavia, questi possono essere personalizzati con l'aiuto dei metodi JavaScript associati. Una volta che possono essere aggiunti o impostati nel documento, l'utente può facilmente identificarli utilizzando il ' scrollTop() ', e il ' scrollLeft() metodi.
Questo post spiega lo scopo e la funzionalità del metodo 'scrollLeft()' in jQuery.
Qual è il metodo 'scrollLeft ()' in jQuery?
IL ' scrollLeft() Il metodo ' è specificamente progettato per la barra di scorrimento orizzontale per impostare e recuperare la sua posizione in pixel. Calcola la posizione della barra di scorrimento dell'elemento HTML selezionato. Viene applicato principalmente agli elementi div, container e section.
Sintassi (imposta posizione barra di scorrimento orizzontale)
$ ( selettore ) .scrollLeft ( posizione )
La sintassi precedente prende il valore intero come ' posizione ” per impostare la posizione della barra di scorrimento orizzontale del selettore di destinazione.
Sintassi (Ottieni posizione barra di scorrimento orizzontale)
$ ( selettore ) .scrollLeft ( )
Questa sintassi restituisce il valore dell'argomento 'posizione' del selettore in pixel.
Usiamo praticamente il metodo definito.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML dichiarato:
< sezione stile = 'altezza: 150px; larghezza: 200px; margine: automatico; bordo: 2px nero pieno; overflow: auto;spazi bianchi: nowrap;' >
< h2 > Benvenuti in Linuxhint ! h2 >
sezione >
< pulsante > Imposta posizione pulsante >
Nelle righe di codice precedenti:
- IL '
Il tag ” contiene una sezione all'interno del documento HTML personalizzata con l'ausilio dell'attributo “style”. - All'interno della sezione creata, il ' Il tag ” definisce il sottotitolo.
- Infine il “
Il tag ” aggiunge un pulsante.
Nota: Segui il codice HTML fornito in tutti gli esempi di questo post.
Esempio 1: applicazione del metodo 'scrollLeft()' per impostare la posizione della barra di scorrimento (orizzontale)
Questo esempio utilizza il metodo 'scrollLeft()' per impostare la barra di scorrimento (orizzontale) nella posizione specificata.
Codice jQuery
Segui il codice jQuery fornito:
< copione src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > copione >< copione >
$ ( documento ) .pronto ( funzione ( ) {
$ ( 'pulsante' ) .clic ( funzione ( ) {
$ ( 'sezione' ) .scrollLeft ( cinquanta ) ;
} ) ;
} ) ;
copione >
In questo frammento di codice:
- Innanzitutto, specifica il percorso CDN della libreria jQuery in '
” tag dal suo sito ufficiale “ https://jquery.com/ ” con l'aiuto del “ src 'attributo. - Successivamente, il secondo tag '