Gli sviluppatori Web utilizzano componenti HTML, come intestazioni e piè di pagina, NAV, Div, Immagine e molti altri per dividere una pagina Web e incorporare il contenuto. Più specificamente, il ""L'elemento è un popolare componente HTML che fornisce un modo semplice per dividere una pagina in sezioni. Alcuni utenti desiderano realizzare i componenti "" in verticale o orizzontalmente per conservare lo spazio della pagina web.

Questo post dimostrerà il metodo per creare un div verticalmente scorrevole utilizzando CSS.

Come creare/creare un div verticalmente scorrevole con CSS?

Per creare un div verticalmente scorrevole utilizzando CSS, seguire le istruzioni fornite.

Passaggio 1: aggiungi l'intestazione

Prima di tutto, aggiungi un ""Tag per l'aggiunta di dati al centro della pagina. Quindi, inserisci l'intestazione utilizzando il "

"Tag.

Passaggio 2: creare un contenitore di div in HTML

Dopodiché, crea un ""Container e assegnare la classe denominata"Scroll-Div". Successivamente, aggiungi un po 'di testo o un paragrafo tra i tag:

Sito Web LinuxHint

Linuxhint è un sito Web popolare per la creazione di contenuti. Ha costruito molti prodotti per aiutarti a conoscere Linux, la programmazione, l'informatica e altro ancora. Questa piattaforma fornisce lavoro su diverse categorie, tra cui HTML/CSS, JavaScript, Git, Windows, Dockers, Discord e molti altri. Fornisce una guida completa su queste categorie. Gli utenti possono trovare qualsiasi argomento relativo alla categoria menzionata. In questa situazione se sei un principiante, puoi fare riferimento a linee guida per scrivere un articolo.

Produzione

Passaggio 3: intestazione di stile

Accedi all'elemento intestazione specificando il nome del tag tra i tag. Quindi, applica il "colore"Proprietà per impostare il colore dell'intestazione:

H1
Colore: RGB (81, 173, 226);

Si può osservare che il colore intestato è stato cambiato:

Passaggio 4: Rendi scrollabile

Successivamente, usa il “.Scroll-Div"Classe per accedere all'elemento HTML e applicare le seguenti proprietà CSS:

.Scroll-div
imbottitura: 5px;
Margine: 5px;
Background-color: RGB (179, 180, 233);
larghezza: 400px;
Altezza: 120px;
overflow-y: auto;
Overflow-X: nascosto;
Testo-align: giustifica;

Nel codice sopra, sono state applicate le seguenti proprietà di CSS:

• "imbottitura"È impostato come"5px"Per allocare lo spazio all'interno dell'elemento Div.
• "Margine"È impostato come"5px"Per creare spazio al di fuori del confine Div.
• "colore di sfondo"Attributo assegna il colore dell'elemento sullo sfondo.
• "larghezza"Specifica una dimensione del contenitore in larghezza.
• "altezza"Attributo assegna l'altezza dell'elemento.
• "overflow-y"Viene utilizzato per rendere lo scorrimento dell'elemento impostando il suo valore come"auto":
• "Overflow-X"È impostato come"nascosto"Per rendere il Div solo scorrevole verticalmente.
• " allineamento"È utilizzato per l'allineamento del testo. Ad esempio, abbiamo allineato il testo come "giustificare".

Si può osservare che abbiamo reso il Div verticalmente scorrevole:

Abbiamo dichiarato il metodo per rendere il div verticalmente scorrevole usando CSS.

Conclusione

Per creare un div verticalmente scorrevole usando il CSS, prima, crea un div con un attributo di classe. L'attributo di classe viene utilizzato per accedere al "div"Elemento. Quindi, imposta il CSS "Overflow-X"Proprietà come"nascosto" e il "overflow-y"Proprietà come"auto"Sull'attributo della classe per rendere l'elemento Div scorrevole verticalmente. Questo tutorial ha dimostrato il metodo per rendere il div verticalmente scorrevole usando CSS.