Codice HTML per una barra di scorrimento orizzontale

July 25

Per impostazione predefinita, la maggior parte degli oggetti in una pagina web - come ad esempio una casella di testo o la finestra del browser in sé - non mostrano una barra di scorrimento orizzontale. Invece, il testo viene formattato automaticamente per adattarsi solo la larghezza del browser. Tuttavia, è possibile programmare la pagina Web per avere una barra di scorrimento orizzontale, a prescindere se è necessario o meno.

Overflow-X Proprietà

La proprietà overflow-x consente di specificare se si desidera un oggetto nella pagina per ritagliare il contenuto ai bordi sui lati sinistro e destro. Per impostazione predefinita, un oggetto non ritaglia i bordi. Con l'aggiunta di questa proprietà per uno stile e impostando il suo valore a "scorrere", si forza l'oggetto da aggiungere una barra di scorrimento orizzontale se è necessario o meno. È inoltre possibile impostare il valore di "auto" per avere l'oggetto creare una barra di scorrimento orizzontale solo quando è necessario, altrimenti non fa nulla.

usi

È possibile includere il codice per aggiungere una barra di scorrimento orizzontale in qualsiasi dei vari luoghi, 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, come un tag di paragrafo o casella di testo. È possibile utilizzare gli stili per creare classi che utilizzano diversi tipi di barre di scorrimento orizzontale, per esempio uno che è rossa con una pista nera, e un altro che è del tutto blu, poi classe queste diverse classi della barra di scorrimento a oggetti diversi, come l'utilizzo del rosso e nero barra di scorrimento nel "<body>" elemento e la barra di scorrimento blu in un tag "<p>".

Colori

L'attributo style "scrollbar-base-colore" consente di impostare il colore generale di una barra di scorrimento. Ad esempio, digitare "body {scrollbar-track-color: red;}" in un blocco di stile o foglio di stile per cambiare il colore della barra di scorrimento al rosso. È possibile modificare le sezioni specifiche della barra di scorrimento, come ad esempio la pista, le ombre, le frecce e colori del viso utilizzando altri attributi. Questi includono la "barra di scorrimento freccia-colore", "barra di scorrimento-track-colore", "barra di scorrimento-DarkShadow-colore", "barra di scorrimento-faccia-colore", scrollbar-highlight-colore "e" barra di scorrimento-ombra-colore "attributi . È possibile utilizzare qualsiasi o tutte queste e applicare un colore diverso per ciascuno di essi per creare una barra di scorrimento multi-color.

considerazioni

L'aggiunta di una barra di scorrimento orizzontale consente di espandere la larghezza della zona è necessario visualizzare il contenuto. Questo è utile se si dispone di un oggetto ampio, come una tabella con più colonne o un'immagine allungata. Tuttavia, le barre di scorrimento orizzontali hanno anche i loro svantaggi come un visitatore alla tua pagina Web è costretto a cliccare manualmente e trascinare la barra di scorrimento utilizzando un mouse, il maggior numero di topi non hanno una rotellina di scorrimento.