CSS supprime la barre de défilement
Exemple 01:
Prenons à HTML pour créer une barre de défilement automatique dans la page Web. Pour cela, vous n'avez pas besoin d'ajouter de nombreuses propriétés ou balises autres que les balises habituelles normales pour les paragraphes et les titres. Nous avons commencé cet exemple avec la création d'un nouveau fichier HTML nommé «CSS». En ouvrant ce fichier dans le code Visual Studio, nous avons commencé à y ajouter un script HTML. La toute première balise que nous avons ajoutée à l'intérieur est la balise principale «HTML» suivie de la balise «tête» et «corps».
Lorsque nous regardons le corps de cette page HTML, il a un cap de la deuxième plus grande taille (i.e., H2), et deux paragraphes via les balises «p». La première balise de paragraphe contient une longue données de type de texte se déplaçant vers la ligne suivante tandis que le deuxième paragraphe contient une simple données en une ligne. Le deuxième paragraphe contient également une simple balise «forte» pour rendre deux mots audacieux. Dans la balise «style» de «tête», nous avons fixé la valeur de la hauteur et de la largeur d'un «corps» entier d'une page HTML: 500px et 1000px respectivement.
Enregistrez le script HTML juste ajouté avec CTRL + S, appuyez sur le menu «Exécuter» à partir de la barre des tâches Visual Studio, puis cliquez sur «Exécuter sans débogage». Il demanderait l'outil dans lequel notre code sera exécuté. Sélectionnez le navigateur «Chrome» et vous êtes prêt à partir. La sortie ci-dessous a montré que l'en-tête et ses deux paragraphes ont été affichés. En raison de données de texte très longues dans le premier paragraphe et une utilisation des petites fenêtres dans Chrome, nous avons la barre de défilement automatique générée à droite et en bas du navigateur. En effet.
Maintenant, pour voir la ligne restante sur la page Web, faites défiler à droite à l'aide de la barre de défilement comme indiqué.
Essayons de supprimer la barre de défilement de la page Web. Nous utiliserons la propriété Overflow définie sur «Hidden» dans la balise de style pour le «corps» d'une page Web. Il ne laissera pas le navigateur générer des barres de défilement automatiques même si nous ajoutons une grande quantité de données à la page Web. Sauvons et exécutons-le.
Après l'avoir exécuté dans le navigateur Chrome, nous avons la sortie comme nous nous attendions. Même si le premier paragraphe contient les longues données de texte, le navigateur n'a pas généré les barres de défilement pour voir la ligne cachée restante. Le troisième paragraphe est également caché dans cette fenêtre de navigateur de taille.
En modifiant la taille du navigateur Chrome à l'aide du pointeur de souris, le troisième paragraphe a été affiché maintenant comme indiqué ci-dessous.
Lorsque nous agrandissons la fenêtre du navigateur de son côté droit, le reste de la ligne cachée sera affichée sans utiliser de barres de défilement.
Exemple 2:
Créons un autre bref exemple pour voir comment nous pouvons créer plus d'une barre de défilement pour différentes sections divisées d'une page HTML. De plus, nous verrons comment nous pouvons également supprimer l'une de ces barres de défilement. En commençant par la balise HTML, nous avons ajouté deux balises «div» dans la balise principale «Body». La première balise «div» a été spécifiée avec la classe «A» pour la différenciation au niveau du style. La deuxième balise «div» n'a pas utilisé la «classe» parce que nous utilisons le style en ligne pour cette balise particulière. Nous utilisons la hauteur spécifique de la propriété 10px et fond d'arrière-plan pour colorer la section «violet». Cette section «div» contient deux lignes. L'un d'eux est marqué de la balise «Mark». La balise «Mark» est utilisée pour mettre en surbrillance le texte spécifié à l'intérieur de la couleur jaune et le rendre important dans la page Web. Nous avons ajouté la ligne marquée car cette balise utilisera la barre de défilement. Les deux balises «div» ont été terminées ici après la balise «Mark». Le body étiquette a également été fermé ici.
Jetons un coup d'œil à la balise de style utilisée dans la balise de tête de ce script HTML. Nous utilisons l'objet de classe «A» pour styliser la section «div» externe. Nous définissons la largeur de la barre de défilement sur «Aucun» pour la section «div» externe en utilisant la propriété de largeur de défilement et débordez dans la direction verticale en définissant la valeur «défilement» pour la propriété «débordement-y». Parallèlement à cela, nous avons fixé la hauteur maximale d'une section «div» externe sur 100px en utilisant la propriété max-hauteur pour la classe «A». Le style et la balise de tête ont été terminés ici et nous avons enregistré notre code pour tester la sortie dans le navigateur Chrome via le code Visual Studio.
L'affichage de la page Web de ce script HTML ressemblerait à une même chose comme indiqué dans l'image ci-dessous. La barre de défilement de la deuxième section «div» de couleur violette ayant une hauteur de 10px a été générée dans l'autre section «div» en raison de sa hauteur, 150px. Le texte utilisé à l'intérieur est également mis en évidence avec l'utilisation de la balise «Mark». D'un autre côté, la section «div» externe n'a pas de barre de défilement visible générée à cette taille de fenêtre. C'est parce que nous définissons la valeur de la propriété «Scrollbar-Width» de «div» externe à «Aucun».
Vous pouvez rendre la barre de défilement visible en modifiant la taille d'une fenêtre trop petite comme indiqué. Seule la barre de défilement verticale serait générée car nous avons utilisé un jeu de débordement pour «défiler». Même si vous raccourcissez la fenêtre du côté droit, la barre de défilement horizontale ne serait jamais générée.
Essayons également de supprimer la barre de défilement verticale automatique de la page Web. Pour cela, nous essaierons le même code HTML en mettant à jour la valeur de sa propriété «débordement-y». Nous l'avons mis sur «aucun» afin qu'aucune barre verticale de la section «div» externe ne soit générée.
Sans mettre à jour aucune autre chose dans ce script, nous l'avons exécuté et obtenu la sortie à faire affiché. Maintenant, même si nous modifions la taille d'une fenêtre chromée en beaucoup plus petite de gauche à droite ou à fond supérieur, elle ne générera pas de barre de défilement verticale ou horizontale pour la «div» extérieure.
Conclusion:
L'article d'aujourd'hui est une collection de certains exemples HTML pour illustrer comment les navigateurs génèrent des barres de défilement automatiques et comment vous pouvez les supprimer du navigateur. Dans le premier exemple, nous avons essayé les balises de paragraphe pour ajouter une grande quantité de données pour générer automatiquement des barres de défilement et utilisé la propriété Overflow pour masquer ces barres de défilement. Parallèlement à cela, nous avons essayé de supprimer spécifiquement les barres de défilement unidirectionnelles de la page Web à l'aide de la propriété «Overflow-y» des pages HTML. L'utilisation des sections «div» a été toute une aide tout au long.