Come nascondere la barra di scorrimento in CSS

Nella navigazione web, la barra di scorrimento appare in verticale e in orizzontale, consentendo agli utenti di scorrere verso l'alto e sinistra a destra. Usando CSS, possiamo impostare gli attributi della barra di scorrimento secondo la nostra scelta. Ad esempio, nascondere e modificarne il colore e la larghezza. In questo articolo, impareremo come nascondere la barra di scorrimento usando le proprietà CSS.

Tra i tanti modi per nasconderlo, il più comune è la proprietà di Overflow e Webkit-Scollbar.

Ecco alcuni esempi pratici in cui nasconderemo la barra di scorrimento usando queste proprietà.

Va bene, iniziamo!

Nascondi la barra di scorrimento usando la proprietà di overflow in CSS

IL "overflow"La proprietà determina come apparirà il contenuto quando trabocca dalla casella del contenuto, ad esempio, tagliando le barre di scorrimento o visualizzando fuori dalla casella.

Sintassi

In CSS, la proprietà di Overflow ha la seguente sintassi:

Overflow: valore

Nel luogo del valore, possiamo impostare valori/parametri diversi di proprietà di overflow come visibili, nascosti, scroll, auto e eredità. Assegna il "nascosto"Valore alla proprietà di Overflow per nascondere la barra di scorrimento.

Ecco un esempio pratico che illustra questo concetto in un modo migliore.

Esempio: come nascondere la barra di scorrimento in CSS usando la proprietà di overflow?

Creiamo un paragrafo all'interno del usando il

tag come segue:

Scorriamo verso l'alto e sinistra a destra della pagina web mentre navighiamo sul Web utilizzando la barra di scorrimento che appare in verticale e in orizzontale. In HTML appare per impostazione predefinita. Usando CSS possiamo impostare gli attributi della barra di scorrimento secondo la nostra scelta i.e larghezza della barra e del colore di scorrimento. Nascondiamo anche la barra di scorrimento, usando CSS.
Tra i molti modi per nasconderlo, i più comuni sono le proprietà di Overflow, Scorrbar e Webkit-Scollbar.

Il risultato del codice dato sarà:

Qui, possiamo vedere che la barra di scorrimento appare verticalmente. Usiamo la proprietà Overflow CSS per nasconderla.

In CSS, scrivere il seguente codice e impostare la proprietà Overflow su "nascosto":

corpo
Overflow: nascosto;

Di conseguenza, la barra di scorrimento scomparirà dalla pagina:

Possiamo vedere che la barra di scorrimento è stata rimossa, ma anche la funzionalità della barra di scorrimento è disabilitata. Tuttavia, usando CSS, possiamo nascondere la barra di scorrimento senza disabilitare la sua funzionalità.

Nascondi la barra di scorrimento in CSS utilizzando la proprietà "WebKit-Scollbar"

IL "WebKit-Scollbar"Lo pseudo-elemento può essere usato per modellare la barra di scorrimento di un elemento in CSS. Ci aiuta anche a nascondere la barra di scorrimento. Questa proprietà funziona solo su browser basati su Webkit, come Chrome, Opera, Safari, Edge, ecc.

Sintassi

Per comprendere la proprietà WebKit, dobbiamo prima capire la sua sintassi:

Body ::-WebKit
/ *display, larghezza, stile */

WebKit ha i seguenti elementi che servono diverse funzionalità alcuni sono:

• WebKit-Scollbar: È usato per modificare l'intera barra di scorrimento.
• WebKit-Scrollbar-Button: Viene utilizzato per modificare i pulsanti a sinistra-destra verso il basso della barra di scorrimento.
• WebKit-Scrollbar-Track: Viene utilizzato per modificare la traccia di scorrimento.
• WebKit-Scrollbar-Thumb: Viene utilizzato per modificare la maniglia di scorrimento trascinabile.
• WebKit-Resider: Viene utilizzato per ridimensionare o modificare una maniglia trascinabile.

Per nascondere la barra di scorrimento, il "WebKit-Scollbar"Viene utilizzato lo pseudo-elemento.

Esempio: come nascondere la barra di scorrimento in CSS utilizzando la proprietà Webkit?

Per nascondere la barra di scorrimento usando "WebKit-Scollbar"Proprietà, impostare il valore del display su"nessuno" come sotto:

Body ::-WebKit-Scollbar
visualizzazione: nessuno;

Ora, nella pagina web, possiamo scorrere attraverso la lunga pagina web senza vedere la barra di scorrimento:

La barra di scorrimento è stata nascosta e puoi scorrere il contenuto del browser utilizzando i tasti verso il basso.

Conclusione

Il CSS "overflow" E "webkit"Le proprietà ci consentono di nascondere la barra di scorrimento dalla pagina web. La proprietà di Overflow disabilita anche la funzionalità dello scorrimento; Tuttavia, la proprietà WebKit consente di scorrere con l'aiuto di freccia tasti. Questo articolo ha spiegato come la proprietà di overflow e la proprietà Webkit funzionano in CSS.