Rimuovere la barra di scorrimento orizzontale CSS
Perché rimuovere la barra di scorrimento?
Sebbene non sia consigliato nel web design per modificare il comportamento del browser predefinito, ci sono momenti in cui è necessario. Ad esempio, una barra di scorrimento che emerge una volta che il contenuto di un elemento overflow potrebbe essere difficile da percepire se occupa una piccola parte di una pagina web. Inoltre, la rimozione della barra di scorrimento ha del tutto senso perché, come web designer, potresti non pensare di scorrere su una pagina web. Indipendentemente dalla giustificazione per il nascondiglio di scorrimento CSS, si dovrebbe prendere in considerazione la compatibilità tra browser. Inoltre, dopo aver nascosto la barra di scorrimento, visualizzare in anteprima il sito Web per assicurarsi che funzioni come previsto per i dispositivi desktop e mobili.
Rimozione della barra di scorrimento in CSS:
Il contenuto che supera i confini del suo contenitore può essere gestito utilizzando l'attributo di overflow in CSS. Se il contenuto di un elemento è maggiore dello spazio disponibile, è possibile utilizzare questa proprietà per tagliare, nascondere o scorrere il contenuto. Le caratteristiche per la gestione dell'overflow scorrevole nei supporti visivi sono incluse in questo modulo CSS. In CSS, l'overflow si verifica quando il contenuto di un contenitore supera uno o più dei bordi del contenitore. In sostanza, specifica ciò che accade quando il contenuto di un elemento è troppo grande per adattarsi al suo contesto a blocchi.
La proprietà eccessiva di CSS supporta i seguenti valori:
auto: Per aggiungere una barra di scorrimento, ma lo farà solo se il contenuto supera l'area scorrevole.
visibile: Per abilitare il contenuto da visualizzare anche quando trabocca.
scorrere: Per tagliare il contenuto e vedere il contenuto rimanente, aggiungerà una barra di scorrimento.
nascosto: Mostrerà il contenuto visibile e il contenuto rimanente sarà nascosto.
clip: Mette il contenuto di un elemento alla sua scatola.
Possiamo impostare i valori della barra di scorrimento con Overflow-X per controllare la barra di scorrimento orizzontale, overflow-y per la barra di scorrimento verticale e l'overflow supporterà entrambi.
Esempio 01: nascondere la barra di scorrimento orizzontale in CSS
Cominciamo con l'esempio di base di rimozione della barra di scorrimento dalla pagina web usando CSS. Sfortunatamente, non esiste una regola CSS specifica che può essere utilizzata per far scomparire la barra di scorrimento e tuttavia consentire agli utenti di scorrere una pagina o un elemento. Con l'uso di alcune regole del CSS specifico del browser, questo è ancora fattibile. Applicare i seguenti CSS al corpo della pagina Web (per l'intera pagina) o un singolo elemento per nascondere o rimuovere la barra di scorrimento e mantenere la funzionalità di scorrimento.
Come visto sopra, possiamo usare diversi modi per far scomparire le barre di scorrimento in diversi browser. Nell'esempio sopra, l'elemento è un'area o un selettore specifico da cui si desidera rimuovere le barre di scorrimento. In questo esempio, creeremo una semplice pagina di esempio per mostrarti come puoi nascondere la barra di scorrimento orizzontale, ma la sua funzionalità di scorrimento funzionerà. Creeremo una pagina della pagina web utilizzando> tag. All'interno di questi tag, creeremo elementi della testa e del corpo per definire la radice e il corpo dell'elemento.
L'attributo "display: nessuno" farà scomparire la barra senza influire sulla sua funzionalità di scorrimento.
Per nascondere la barra di scorrimento orizzontale, consentiremo al nostro contenuto di superare il limite orizzontale della pagina. Per questo useremo "White-Space: NowRap;" Ciò consentirà al testo di rimanere sulla stessa riga fino a quando non utilizziamo il tag della riga di rottura. Nei browser più vecchi come "Internet Explorer", imposteremo l'attributo -ms-overflow in stile: nessuno ". Mentre nei browser moderni, come in Firefox, possiamo usare "Scrollbar-Width: Nessuno" e per Chrome e altri browser moderni, "None" può essere utilizzato. Quando il contenuto si estende oltre i confini orizzontali dell'elemento a livello di blocco, la proprietà CSS di Overflow-X determina ciò che viene visualizzato.
Possiamo fare lo stesso per gli elementi Div utilizzando i selettori Div in CSS.
Utilizzando il codice sopra, otterremo una pagina Web come segue:
Come puoi vedere, questo è lo stesso di quello precedente, ma questa volta abbiamo usato i selettori Div per nascondere le barre di scorrimento dei contenitori. Abbiamo stilizzato il Div specificando il suo bordo per essere 5px nero solido, bordo-radius 5px, altezza di 150px e larghezza del contenitore div essere 300px.
Esempio 02: Rimozione della barra di scorrimento e disabilitando la sua funzionalità in CSS
Attraverso la sua funzione di overflow CSS, CSS consente la possibilità di scomparire la barra di scorrimento e di disabilitare lo scorrimento. Gestire il contenuto che supera i limiti del suo contenitore è gestito da queste proprietà. Nascondere la barra di scorrimento orizzontale può essere utile perché lo scorrimento orizzontale è spesso una scelta terribile. Usando "Overflow-X: nascosto", possiamo far scomparire la barra di scorrimento orizzontale e fermare lo scorrimento orizzontale. Abbiamo semplicemente aggiunto la regola "overflow: nascosto" al corpo di un elemento del contenitore per smettere di scorrere mentre usi questo attributo. Questo nasconderà tutto il materiale che si estende oltre il confine dell'elemento.
Usando questo codice, la nostra barra di scorrimento orizzontale scomparirà e non saremo in grado di scorrere a sinistra oa destra.
Come puoi vedere, l'uso di "Overflow-X: Hidden" ha rimosso la barra di scorrimento orizzontale e la funzionalità per scorrere a sinistra o a destra.
Tuttavia, per visualizzare materiale che estende i limiti del contenitore, utilizzare l'overflow: visibile come alternativa.
Come puoi vedere, l'immagine sta superando i confini del contenitore.
Esempio 03: Rimozione della barra di scorrimento orizzontale fino a quando non ne abbiamo bisogno
In alcune situazioni, nascondere la barra di scorrimento potrebbe migliorare il tuo design. In altri casi, l'eliminazione di questa parte della pagina può peggiorare l'esperienza dell'utente. La maggior parte dei visitatori collega una barra di scorrimento con l'azione di scorrimento. Pertanto, potrebbe sembrare insolito per gli altri se usi questa tecnica in tutto il sito Web. Inoltre, le barre di scorrimento indicano la quantità di pagina ancora visibile. La mancanza di una barra di scorrimento può essere scoraggiante a meno che tu non abbia un altro segnale visivo che ci sono ancora più contenuti da vedere. I test degli utenti possono rivelare come l'assenza di una barra di scorrimento influisce sull'esperienza utente del tuo sito, sebbene in molte situazioni, nascondendo la barra di scorrimento fino a quando l'utente inizia a scorrere è un compromesso intelligente.
Poiché l'overflow è impostato su Auto, le barre non appariranno se il contenuto non è più grande dei confini della finestra del browser.
Come puoi vedere, non esiste una barra di scorrimento orizzontale in quanto il limite non è stato superato. Quando il limite viene superato, la barra di scorrimento apparirà sullo schermo per lo scorrimento.
Come puoi vedere nel codice HTML, il contenuto in
è più grande dell'esempio precedente, quindi la barra di scorrimento orizzontale apparirà nella parte inferiore.
La barra di scorrimento viene aggiunta dall'impostazione automatica, ma non verrà visualizzata a meno che non vi sia un overflow dei contenuti. Di conseguenza, la barra di scorrimento nascosta appare solo quando richiesto.
Conclusione
Poiché facilita la navigazione, la barra di scorrimento è un utile indicatore visivo per la maggior parte dei visitatori. Tuttavia, in alcune circostanze, puoi nasconderlo intenzionalmente per migliorare o cambiare il tuo design. Con pochi principi dal nostro articolo, puoi usare CSS per nascondere la barra di scorrimento su una pagina o elemento HTML. In questo tutorial, abbiamo imparato a nascondere la barra di scorrimento e come funziona in diversi browser. Ora, dopo aver completato questo tutorial, dovresti essere in grado di rimuovere o nascondere facilmente le barre di scorrimento da solo.