CSS Rimuovere la barra di scorrimento
Esempio 01:
Prendiamo a HTML per creare una barra di scorrimento automatica nella pagina web. Per questo, non è necessario aggiungere molte proprietà o tag diversi dai normali tag soliti per paragrafi e intestazioni. Abbiamo iniziato questo esempio con la creazione di un nuovo file HTML chiamato "CSS". Aprendo questo file nel codice Visual Studio, abbiamo iniziato ad aggiungere uno script HTML ad esso. Il primo tag che abbiamo aggiunto al suo interno è il tag principale "HTML" seguito dal tag "testa" e "corpo".
Quando guardiamo il corpo di questa pagina HTML, ha una voce della seconda dimensione più grande (i.e., H2) e due paragrafi tramite i tag "P". Il primo tag di paragrafo contiene un tipo di tipo di testo lungo che si sposta nella riga successiva mentre il secondo paragrafo contiene un semplice dati a una riga. Il secondo paragrafo contiene anche un semplice tag "forte" al suo interno per rendere audace due parole. All'interno del tag "stile" di "testa", abbiamo impostato il valore per l'altezza e la larghezza di un intero "corpo" di una pagina HTML: 500px e 1000px rispettivamente.
Salva lo script HTML appena aggiunto con Ctrl+S, tocca il menu "Esegui" dalla barra delle applicazioni Visual Studio e fai clic su "Esegui senza debug". Chiederebbe lo strumento in cui verrà eseguito il nostro codice. Seleziona il browser "Chrome" e sei a posto. L'output di seguito ha mostrato che sono stati visualizzati l'intestazione e i suoi due paragrafi. A causa dei dati di testo molto lunghi nel primo paragrafo e nell'utilizzo di una piccola finestra in Chrome, abbiamo generato la barra di scorrimento automatica a destra e in basso del browser. Questo perché qualsiasi browser ha scorrini incorporati che verrebbero generati all'uso di una grande quantità di dati.
Ora, per vedere la riga rimanente sulla pagina web, scorrere a destra usando la barra di scorrimento come mostrato.
Proviamo a rimuovere la barra di scorrimento dalla pagina web. Useremo la proprietà di Overflow impostata su "nascosto" all'interno del tag di stile per il "corpo" di una pagina web. Non consentirà al browser di generare barre di scorrimento automatiche anche se aggiungiamo una grande quantità di dati alla pagina web. Salviamo e eseguiamolo.
Dopo averlo eseguito nel browser Chrome, abbiamo l'output come ci aspettavamo. Anche se il primo paragrafo contiene i dati di testo lunghi, il browser non ha generato le barre di scorrimento per vedere la linea nascosta rimanente. Il terzo paragrafo è anche nascosto in questa finestra del browser di dimensioni.
Modificando le dimensioni del browser Chrome usando il puntatore del mouse, il terzo paragrafo è stato visualizzato ora come mostrato di seguito.
Quando ingrandiamo la finestra del browser dalla sua parte destra, il resto della linea nascosta verrà visualizzato senza l'uso di nessuna barra di scorrimento.
Esempio 2:
Creiamo un altro breve esempio per vedere come possiamo creare più di 1 barra di scorrimento per diverse sezioni divise di una pagina HTML. Inoltre, vedremo come possiamo rimuovere anche una di quelle barre di scorrimento. A partire dal tag HTML, abbiamo aggiunto due tag "div" all'interno del tag principale "corpo". Il primo tag "Div" è stato specificato con la classe "A" per la differenziazione a livello di styling. Il secondo tag "Div" non ha usato la "classe" perché abbiamo usato lo stile in linea per questo particolare tag. Stiamo usando l'altezza specifica di 10px e la proprietà color sfondo per colorare la sezione "viola". Questa sezione "div" contiene due righe. Uno di questi è contrassegnato con il tag "marchio". Il tag "Mark" viene utilizzato per evidenziare il testo specificato al suo interno in colore giallo e renderlo importante all'interno della pagina web. Abbiamo aggiunto la riga contrassegnata in quanto questo tag utilizzerà la barra di scorrimento. Entrambi i tag "Div" sono stati finiti qui dopo il tag "Mark". Anche il tag del corpo è stato chiuso qui.
Diamo un'occhiata al tag di stile usato all'interno del tag principale di questo script HTML. Abbiamo usato l'oggetto di classe "A" per modellare la sezione "Div" esterna. Stiamo impostando la larghezza della barra di scorrimento su "Nessuno" per la sezione "Div" esterna usando la proprietà della larghezza della barra di scorrimento e l'overflow nella direzione verticale è stato abilitato impostando il valore "scorrimento" per la proprietà "overflow-y". Insieme a questo, abbiamo impostato l'altezza massima di una sezione "Div" esterna su 100px usando la proprietà massima-altezza per la classe "A". Lo stile e il tag Head sono stati completati qui e abbiamo salvato il nostro codice per testare l'output nel browser Chrome tramite il codice Visual Studio.
Il display della pagina web per questo script HTML sarebbe simile a quello mostrato nell'immagine seguente. La barra di scorrimento per la seconda sezione "div" di colore viola con altezza di 10 px è stata generata all'interno dell'altra sezione "div" a causa della sua altezza, 150px. Il testo utilizzato al suo interno è anche evidenziato con l'uso del tag "marchio". D'altra parte, la sezione "Div" esterna non ha una barra di scorrimento visibile generata a questa finestra. È perché abbiamo impostato il valore per la proprietà "Scrollbar-Width" di "Div" esterno su "Nessuno".
Puoi rendere visibile la barra di scorrimento cambiando le dimensioni di una finestra troppo piccola come mostrato. Verrebbe generata solo la barra di scorrimento verticale in quanto abbiamo usato un set di overflow-y per "scorrere". Anche se accordi la finestra dal lato destro, la barra di scorrimento orizzontale non sarebbe mai generata.
Proviamo anche a rimuovere la barra di scorrimento verticale automatica dalla pagina web. Per questo, proveremo lo stesso codice HTML aggiornando il valore della sua proprietà "overflow-y". Lo abbiamo impostato su "nessuno" in modo che non venga generata barra verticale per la sezione "div" esterna.
Senza aggiornare qualsiasi altra cosa all'interno di questo script, l'abbiamo eseguita e ottenuto l'output di emergenza mostrata. Ora, anche se cambiamo le dimensioni di una finestra cromata a molto più piccola da sinistra-destra o dal fondo superiore, non genererà nessuna barra di scorrimento verticale o orizzontale per la "div" esterna.
Conclusione:
L'articolo di oggi è una raccolta di alcuni esempi HTML per illustrare come i browser generano barre di scorrimento automatiche e come puoi rimuoverli dal browser. All'interno del primo esempio, abbiamo provato i tag di paragrafo per aggiungere una grande quantità di dati per generare automaticamente le barre di scorrimento e abbiamo utilizzato la proprietà di overflow per nascondere quelle barre di scorrimento. Insieme a questo, abbiamo cercato di rimuovere in modo specifico le barre di scorrimento unidirezionali dalla pagina web usando la proprietà "overflow-y" delle pagine HTML. L'uso delle sezioni "div" è stato un bel aiuto in tutto.