Per impostazione predefinita, maggior parte degli oggetti su una pagina Web--ad esempio una casella di testo o la finestra del browser stesso - non mostrano una barra di scorrimento orizzontale. Invece, il testo viene formattato automaticamente per adattarsi solo la larghezza del browser. Tuttavia, è possibile programmare pagine Web per avere una barra di scorrimento orizzontale, indipendentemente dal fatto se uno ha bisogno o no.

Proprietà overflow-X

La proprietà overflow-x consente di specificare se si desidera un oggetto nella tua pagina per ritagliare il contenuto ai bordi sui suoi lati destro e sinistro. Per impostazione predefinita, un oggetto non ritaglia i bordi. Aggiunta questa proprietà ad uno stile e impostandone il valore di "scorrere", è possibile forzare l'oggetto per aggiungere una barra se uno ha bisogno o no di scorrimento orizzontale. È inoltre possibile impostare il valore su "auto" per creare una barra solo quando è necessario di scorrimento orizzontale dell'oggetto, altrimenti non fa nulla.

Utilizza

È possibile includere il codice per aggiungere una barra di scorrimento orizzontale in una qualsiasi delle diverse località, tra cui in un foglio di stile CSS o un tag di stile in un documento HTML, oppure è possibile aggiungerlo a un oggetto specifico della pagina ad esempio una casella di testo o tag di paragrafo. È possibile utilizzare gli stili per creare classi che utilizzano diversi tipi di barre di scorrimento orizzontali, ad esempio uno che è rosso con una pista nera e un altro che è interamente blu, quindi queste classi di barre di scorrimento differenti in diversi oggetti, ad esempio utilizzando la barra di scorrimento rosso e nero nell'elemento "< body >" e la barra di scorrimento blu in un tag "< p >" di classe.

Colori

L'attributo di stile "scrollbar-base-colore" consente di impostare il colore generale per una barra di scorrimento. Ad esempio, digitare "corpo {scrollbar-track-colore: rosso;}" in un blocco di stile o un foglio di stile per modificare lo scroll colore della barra al rosso. È possibile modificare specifiche sezioni della barra di scorrimento, ad esempio i colori traccia, ombre, frecce e faccia utilizzando altri attributi. Questi includono il "barra di scorrimento-freccia-colore", "scrollbar-track-colore", "scrollbar-darkshadow-color," "scrollbar-face-color,"scrollbar-highlight-color"e"scrollbar-shadow-color"attributi. È possibile utilizzare uno qualsiasi o tutti questi e applicare un colore diverso a ciascuno per creare una barra di scorrimento multi-colored.

Considerazioni

Aggiunta di una barra di scorrimento orizzontale consente di espandere la larghezza della zona che è necessario visualizzare il contenuto. Questo è utile se si dispone di un ampio oggetto ad esempio una tabella con più colonne o un'immagine estesa. Tuttavia, le barre di scorrimento orizzontali hanno i loro svantaggi come un visitatore al vostro Web page è costretto a manualmente fare clic e trascinare la barra di scorrimento utilizzando un mouse, come molti topi non hanno una rotella di scorrimento.