Senza dubbio, lo scorrimento svolge un ruolo vitale nelle applicazioni Web. Tuttavia, potrebbe non aver bisogno di quella barra di scorrimento sulla tua pagina ad un certo punto. Ad esempio, se il contenitore copre solo il venticinque percento di una pagina web ed è allineato a sinistra, la barra di scorrimento aggiunta avrà sicuramente al centro. In tale situazione, puoi utilizzare alcune proprietà CSS per disabilitare la barra di scorrimento.

Questo articolo coprirà il metodo per disabilitare la barra di scorrimento in CSS.

Come disabilitare la barra di scorrimento in CSS?

Per disabilitare la barra di scorrimento su una pagina, utilizzare le seguenti proprietà CSS:

• overflow-y (Disabilita barra di scorrimento verticale)
• Overflow-X (Disabilita barra di scorrimento orizzontale)
• overflow (Disabilita barre di scorrimento verticali e orizzontali)

Esploriamo ogni proprietà CSS uno per uno.

Metodo 1: utilizzare la proprietà overflow-y per disabilitare la barra di scorrimento verticale in CSS

IL "overflow-y"La proprietà specifica cosa accadrà se il contenuto non si adatta al contenitore in modo diretto. Viene inoltre utilizzato per visualizzare il contenuto di overflow di un elemento a livello di blocco e per aggiungere o disabilitare una barra di scorrimento.

Quindi, prendiamo un esempio per verificare la procedura di disabilitazione della barra di scorrimento verticale con l'aiuto della proprietà CSS di Overflow-Y.

Esempio

Per la nostra pagina HTML, disabiliteremo la barra di scorrimento verticale presente sul lato destro:

Posiziona gli elementi HTML desiderati, come nel nostro caso, aggiungeremo un'intestazione nel ""Tag del file HTML:

Disabilitare la barra di scorrimento

Per nascondere la barra di scorrimento verticale, imposta il “overflow-y"Proprietà a"nascosto". L'altezza e la larghezza di "200%"Verrà utilizzato per rendere la pagina più lunga e più ampia. Ecco come otterremo intenzionalmente le barre di scorrimento sulla nostra pagina:

Salva il codice fornito ed esegui il tuo file HTML nel browser:

Come puoi vedere, abbiamo disabilitato correttamente la barra di scorrimento verticale usando la proprietà CSS overflow-y.

Metodo 2: utilizzare la proprietà overflow-x per disabilitare la barra di scorrimento orizzontale in CSS

Quando il contenuto non si inserisce nel contenitore in modo largo, il "Overflow-X"La proprietà viene utilizzata per gestire tali scenari. Imposta ciò che mostra quando il contenuto aggiunto trabocca. Questa proprietà CSS può anche essere utilizzata per disabilitare la barra di scorrimento orizzontale.

Esempio

Ora disabiliteremo la barra di scorrimento orizzontale sotto la luce della nostra pagina HTML:

Per nascondere la barra di scorrimento orizzontale, imposta il "Overflow-X A "nascosto"E aggiungi il valore delle proprietà di altezza e larghezza come indicato nell'esempio precedente:

Produzione

Vuoi disabilitare contemporaneamente barre orizzontali e verticali? Se sì, segui la sezione successiva!

Metodo 3: utilizzare la proprietà di overflow per disabilitare le barre di scorrimento verticali e orizzontali in CSS

Quando il contenuto non si adatta al contenitore orizzontale e in verticale, il "overflow"La proprietà specifica se aggiungere barre di scorrimento o tagliare il contenuto. Puoi anche utilizzare questa proprietà CSS per disabilitare contemporaneamente le barre di scorrimento verticale e orizzontale.

Esempio

Nello stesso file HTML, aggiungeremo il "overflow"Proprietà e assegnargli un"nascosto" valore. Ciò disabiliterà la barra di scorrimento per entrambi i luoghi, orizzontalmente e verticalmente:

Produzione

Abbiamo offerto istruzioni sulla disabilitazione di barre di scorrimento utilizzando diverse proprietà CSS.

Conclusione

Per disabilitare le barre di scorrimento in CSS, puoi usare "Overflow-X","overflow-y", e il "overflow" proprietà. La proprietà Overflow-X è specificamente utilizzata per disabilitare la barra di scorrimento verticale e la proprietà di overflow-y per disabilitare le barre di scorrimento orizzontale. Inoltre, la proprietà di overflow aiuta a disabilitare le barre verticali e orizzontali contemporaneamente. Questo articolo ha discusso dei metodi per disabilitare le barre di scorrimento in CSS.