Maison > Article > interface Web > Comment définir la barre de défilement dans DIV
Comment définir la barre de défilement dans DIV
- php中世界最好的语言original
- 2017-11-20 12:24:537554parcourir
Dans le processus de fonctionnement réel, nous savons que de nombreux DIV ne suffisent pas pour afficher tout le contenu, les barres de défilement doivent donc être définies. Aujourd'hui, je vais vous apprendre à définir la barre de défilement des DIV.
Définissez les barres de défilement pour le div et définissez ses styles de barre de défilement horizontale et de barre de défilement verticale. Les styles CSS requis sont overflow-y et overflow-x pour définir les effets de barre de défilement droite et inférieure de l'objet boîte div. Dans le même temps, vous pouvez également utiliser des styles CSS pour masquer la barre de défilement de l'iframe du cadre html. Je vous le présenterai ensuite.
1. Compréhension de base de CSS - TOP
overflow-y:scroll; Toujours afficher la barre de défilement verticale
overflow-y : visible : Ne pas couper le contenu ni ajouter de barre de défilement verticale
Comprendre : manuel de débordement-y http://www.divcss5.com/shouce/c_overflowy.shtml
overflow-x :scroll ; Toujours afficher les barres de défilement horizontales
overflow-x:visible : Ne pas couper le contenu ni ajouter de barres de défilement horizontales
En savoir plus : manuel overflow-x http://www.divcss5. com /shouce/c_overflowx.shtml
En savoir plus sur le débordement CSS
2. Exemple de barre de défilement de paramètre div
DIVCSS5 en définissant le premier DIV L'objet définit la largeur du div, la hauteur du div et le style de bordure du div, et ajoute du contenu de texte de démonstration dans la zone DIV. La deuxième zone définit le même style CSS, le même contenu de texte dans la zone et définit les barres de défilement horizontales et verticales. pour observer l'effet.
La première boîte CSS est nommée "divcs5-a", et le deuxième sélecteur de style de boîte DIV est nommé "divcss5-b".
1. Le code source HTML complet spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 www.divcss5.com</title>
<style>
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="divcss5-a">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div>
<div class="divcss5-b">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div>
</body>
</html>Afin d'observer l'effet, nous définissons le même style CSS et le même contenu de texte pour les deux boîtes DIV. Définissez le style de barre de défilement défini pour qu'il n'y ait pas de débordement. Un style de barre de défilement déroulante apparaît sur le côté droit (Y) de la direction verticale
.
Comment masquer la barre de défilement CSS div
DIV n'a pas de barres de défilement par défaut Si un style de barre de défilement est ajouté, la barre de défilement disparaîtra naturellement après l'avoir supprimée. S'il s'agit d'une barre de défilement qui apparaît dans une iframe, si vous souhaitez masquer la barre de défilement horizontalement en visible ou overflow-y:hidden, vous pouvez masquer la barre de défilement.
Lecture connexe :
animation d'ondulation CSS Plusieurs façons d'insérer des espaces dans les méthodes HTML Ajouter ou supprimer un élément HTML domCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!