Css a scorrimento orizzontale. Div a scorrimento

Diamo un'occhiata a come la regola di overflow CSS (usando i suoi valori nascosti, visibili, di scorrimento e automatici) può manipolare il contenuto se non rientra nell'area assegnata.

In pratica (durante l'impaginazione o l'editing), tali situazioni si incontrano spesso, quindi sarà utile a molti. Inoltre, strada facendo, toccheremo le variazioni di questa proprietà overflow-x e overflow-y, che sono un caso speciale e hanno le loro peculiarità. Toccheremo anche la regola di overflow del testo adiacente, che determina la visibilità del testo in un blocco che va oltre i limiti di un elemento.

Naturalmente, in molti casi, non si può fare a meno di specificare le dimensioni specifiche dell'area attraverso la larghezza e l'altezza (larghezza e altezza della scatola) che può assumere. In generale, considereremo di seguito esempi dell'effetto della proprietà di overflow in tutti i modi possibili.

Overflow (visibile, nascosto) - contenuto visibile o nascosto di un blocco che va oltre i suoi limiti

Innanzitutto, seguendo la tradizione, vediamo quali sono i valori in vigore nella tabella delle specifiche dell'International Consortium W3C (i dati sono presentati secondo la versione CSS2.1, sebbene siano validi e supportati in più nuova versione CSS3):

Come puoi vedere, l'overflow ha 4 parametri principali (visibile, nascosto, automatico, scorrimento) e eredita valore, che puoi scrivere se vuoi assegnare, ma per impostazione predefinita questa regola non è ereditata ( ereditato: no nello screenshot). Il valore predefinito è visibl (iniziale: visibile).

Prima di procedere con l'esplorazione con esempi pratici, cerchiamo di ottenere alcuni dettagli per noi stessi. Come accennato in precedenza, la regola di overflow ti consente di controllare il contenuto elemento di blocco nei casi in cui non rientra in esso. Questo segue direttamente dal nome di questo Regole CSS(overflow in inglese significa overflow, eccesso.)

In precedenza, puoi familiarizzare con in cosa consiste facendo clic sul collegamento fornito. Inoltre, sarà utile scremare il materiale, che dà agli elementi sulla pagina le caratteristiche del blocco.

Prendiamo come esempio un contenitore DIV (più in dettaglio sui div come base disposizione dei blocchi), coloralo con lo sfondo, tramite l'attributo style, e posizionalo all'interno testo arbitrario:

Il risultato finale sarà qualcosa del genere:

Non abbiamo definito la larghezza del contenitore. In questo caso, se ben ricordi, l'elemento block occupa tutto lo spazio a sua disposizione in larghezza. Ma l'altezza (altezza) del blocco, se non è specificata, è determinata dal contenuto (nel nostro esempio, il testo lì presente).

Regola di overflow per i blocchi contenenti contenuti che non possono essere distribuiti in altezza

Sopra, ho suggerito un esempio in cui un elemento di blocco contiene testo che può essere ridistribuito quando la larghezza è limitata (cambiando la parola a capo). Questo è ora particolarmente vero quando si applica design reattivo per la visualizzazione sui telefoni cellulari. Tuttavia, accade che il contenuto, per un motivo o per l'altro, non sia così flessibile.

Iniziamo con le stesse condizioni dell'esempio che abbiamo discusso sopra. Ricorda che quando hai specificato una larghezza fissa del blocco, il contenuto è stato ridistribuito in modo tale da non superare il bordo in orizzontale, ma allo stesso tempo aumentare l'altezza del contenitore (insieme al contenuto) in verticale. Adesso cambiamo il contenuto e sostituiamo il testo standard con parole lunghe senza spazi, specificando la larghezza:

Notare che il contenuto ora ha immediatamente superato il bordo orizzontale quando è vincolato alla larghezza. E se scriviamo l'overflow nascosto, taglieremo il contenuto:

Aggiunta di scorrimento tramite scorrimento e parametri automatici della regola di overflow

Ora diamo un'occhiata al caso se la larghezza e l'altezza del contenitore sono fisse, ma è preferibile lasciare disponibile il contenuto che non si adatta al suo interno. Facciamo lo stesso esempio c larghezza fissa e altezza, solo il valore dell'altezza per chiarezza indicheremo in 60px, aggiungendo overflow: scroll agli stili CSS:

Di conseguenza, le barre di scorrimento sono apparse verticalmente e orizzontalmente:

Pertanto, il contenuto diventa disponibile, sebbene con l'aiuto dello scorrimento. Tuttavia, tieni presente che non solo scorrimento verticale, necessaria per la visualizzazione completa, ma anche orizzontale, che non è attiva. Questa è una caratteristica del valore di scorrimento.

Voglio notare che la regola di stile di base ha variazioni sotto forma di overflow-x e overflow-y, che assumono gli stessi valori (visibile, nascosto, scroll, auto) dell'overflow di base, solo impostare i parametri applicare al contenuto delle caselle orizzontalmente (x) e verticalmente (y).

Regola di overflow del testo CSS (clip, puntini di sospensione)

Ora facciamo conoscenza con la modifica della proprietà overflow sopra descritta, che è apparsa solo nei CSS3. Puoi avere informazioni su di lui nella pagina ufficiale corrispondente (bozza editoriale del consorzio W3C):

Proprietà testo-overflow ha 2 significati principali (clip ed ellissi). Ha effetto solo se viene specificato l'overflow, che ha un valore diverso da visibile. E questo, come ricordi, è il parametro predefinito, quindi gli stili per l'elemento corrispondente devono avere un overflow con nascosto, scorrimento o automatico.

Clip è l'impostazione predefinita e ritaglia solo il testo. Pertanto, abilitiamo il text-overflow per il nostro DIV con le proprietà CSS appropriate aggiungendo lo spazio bianco: nowrap (per evitare il ritorno a capo automatico):

Come potete vedere i puntini di sospensione ti permettono di aggiungere i puntini di sospensione invece del testo ritagliato, suggerendo la sua continuazione. Per dare una conclusione logica questo esempio, puoi aggiungere la pseudo-classe: hover per il div, che cambia lo stile dell'elemento quando ci passi sopra con il mouse:

Class1: hover (overflow: visibile; white-space: normale;)

Ora il testo verrà tagliato, ma se muovi il cursore del mouse su di esso, apparirà in in toto... Puoi verificarlo facendo clic sul collegamento fornito.

3. Forza lo scorrimento verticale e orizzontale in un blocco CSS
4. Esempio di blocco div a scorrimento

In questo articolo analizzeremo il problema della creazione di un blocco (div) di dimensione fissa con la possibilità di scorrere orizzontalmente e verticalmente. Questo può essere implementato usando i CSS... Responsabile di questo proprietà di overflow.

Informazioni sull'utile proprietà overflow

Proprietà straripamentoè responsabile della visualizzazione del contenuto di un elemento di blocco. Può essere utilizzato quando il contenuto non si adatta completamente e va oltre l'area del blocco.

overflow-x- è responsabile della visualizzazione orizzontale del contenuto di un elemento di blocco.
overflow-y- è responsabile della visualizzazione verticale del contenuto di un elemento di blocco.

Codice CSS

Prokrutka (
trabocco: automatico; / * proprietà per scorrere orizzontalmente. Automatizza se il contenuto è più grande del blocco * /
}

Proprietà e valori di overflow

visibile- visualizza l'intero contenuto dell'elemento, anche oltre la larghezza specificata.
nascosto- viene visualizzata solo l'area all'interno dell'elemento, il resto viene nascosto.
scorrere- aggiunta forzata di una barra di scorrimento orizzontale (y) o orizzontale (x).
auto- aggiunto automaticamente striscia orizzontale scorrimento se il blocco è più piccolo.

Considera un esempio di una classe CSS. In larghezza e altezza, impostiamo la larghezza e l'altezza desiderate del blocco (il contenuto del blocco non andrà oltre) e con la proprietà overflow: auto; impostare lo scorrimento orizzontale se necessario

Codice CSS

Prokrutka (
larghezza: 150px; / * la larghezza del nostro blocco * /
altezza: 100px; / * l'altezza del nostro blocco * /


trabocco: automatico; / * proprietà per scorrere orizzontalmente. Automa se c'è più blocco * /
}

Forza lo scorrimento in un blocco CSS

Puoi anche forzare lo scorrimento in altezza e larghezza. Per fare ciò, ogni asse: overflow-y: scroll; (verticale) overflow-x: scroll; (orizzontale) specifichiamo il parametro scroll, scrolling forzato.

Codice HTML e CSS

Prokrutka (
altezza: 150px; / * l'altezza del nostro blocco * /
sfondo: #fff; / * colore di sfondo, bianco * /
bordo: 1px solido # C1C1C1; / * dimensione e colore del bordo del blocco * /


}

Esempio di blocco div a scorrimento

Codice HTML e CSS

Una delle proprietà straripamento può essere rimosso, quindi si scorrerà solo lungo un asse, il che è abbastanza.
Visualizza il lavoro di sceneggiatura Per esempio qui di seguito.

Istruzioni

Usa un tag div se desideri una barra di scorrimento non per l'intera pagina, ma solo per un'area limitata di essa. V linguaggio HTML(HyperText Markup Language - "Hypertext Markup Language") I "tag" si riferiscono ai singoli comandi del browser per visualizzare un particolare elemento della pagina. nel molto forma semplice un tag div (spesso indicato come "livello") in questo modo:

Qui - chiusura. Tutto ciò che è posizionato tra i tag di apertura e chiusura è nel livello come nel contenitore e questo contenitore può essere dimensionato - larghezza e altezza. Questo è fatto con parametro aggiuntivo("Attributo") stile che segue il tag di apertura: