Il caso del metodo .scrollLeft() in jQuery è un tipico esempio di come i CSS influenzino questa libreria. Questo metodo se usato in scrittura serve a far scorrere
il contenuto di un elemento verso una data posizione orizzontale. Perché a volte non funziona?
La proprietà CSS in questo caso coinvolta è la proprietà overflow. Per far funzionare il nostro metodo occorre che l'elemento discendente di un genitore abbia una larghezza maggiore del suo contenitore.
Infatti nei CSS lo scrolling ha luogo solo se i contenuti non possono essere visualizzati a causa delle dimensioni specificate per il contenitore. Questo forza il browser a dover fornire un meccanismo di scorrimento.
Con i CSS è spesso sufficiente specificare overflow: auto per visualizzare la barra di scorrimento. In questo caso il browser è costretto a fornire tale meccanismo perché altrimenti il contenuto in eccesso non sarebbe visibile.
In jQuery il discorso è leggermente diverso: il metodo .scrollLeft() va sempre applicato al genitore dell'elemento con larghezza maggiore a patto che questo elemento abbia a sua volta un genitore con la proprietà overflow impostata su un valore diverso da hidden.
Quindi se abbiamo degli stili come:
#outer {
width: 400px;
overflow: auto;
}
#inner {
width: 400px;
overflow: hidden;
}
#scroller {
width: 1000px;
}
Il metodo .scrollLeft() andrà applicato all'elemento #inner, che è il diretto antenato dell'elemento il cui contenuto è in eccesso rispetto agli altri data la sua larghezza.
Notate come l'elemento esterno permetta questo risultato grazie al fatto che la sua proprietà overflow è impostata su auto.